html基础之弹性布局（dispaly ：flex）

迈不过友情╰ 2023-08-17 16:29 126阅读 0赞

本文直接介绍一些属性，需要注意什么等等类似的不在介绍，知识点导航

父元素属性

*  flex-direction:项目的排列方向  
    flex-wrap:若果一条轴线排不下，如何换行  
    flex-flow  
    justify-content  
    align-items  
    align-content

子元素属性

*  order  
    flex-grow  
    flex-shrink  
    flex-basic  
    flex

### 使用之前需在父元素设置“display：flex” ###

话不多说，直接上代码，基础代码在最下面，会在原有的基础上添加

.parent{ display:flex;}

![2019093008494244.PNG][]

\-设置父元素 display: flex; 这会使每个子元素自动变为伸缩项; 所谓伸缩项，就是说当父元素的宽度不足以容纳所有子元素时，会将子元素进行等比例收缩直到父容器足以一行放下所有子元素;

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

### 作为父容器的六大属性 ###

#### 1，flex-direction决定主轴的方向（即项目的排列方向） ####

*  row（默认值）：主轴为水平方向，起点在左端
 *  row-reverse：主轴为水平方向，起点在右端
 *  column：主轴为垂直方向，起点在上沿
 *  column-reverse：主轴为垂直方向，起点在下沿

实例：其中只实验了一个属性，对应的图片分别为下图，关于父元素的元素全部都是在 . parent的基础上进行设置

display: flex;
    	flex-direction: row-reverse;

![2019093008494244.PNG][] ![20190930084945314.PNG][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1][]

#### 2，flex-wrap:若果一条轴线排不下，如何换行 ####

*  nowrap(默认)：不换行，当容器宽度不够时，每个子元素会被挤压宽度
 *  rwrap：换行，并且第一行在容器最上方
 *  wrap-reverse：换行，并且排在第一行容器最下面

width：150px;//原来的宽度太大
    	display: flex;
    	flex-direction: row-reverse;

![2019093009165766.PNG][] ![20190930091613161.PNG][] ![2019093009162137.PNG][]

#### 3，flex-flow：是flex-direction和，flex-wrap的缩写。默认值为：flex-flow：row wrap；一般不需要使用 ####

#### 4，justify-content：定义了项目在主轴上的对齐方向 ####

> > 此属性与主轴方向息息相关。  
    主轴方向为：row - 起点在左边，row-reverse -起点在右边，column - 起点在上边，column-reverse -起点在下边

*  flex - start(默认值)：项目位于主轴起点。
 *  flex-end：主轴位于主轴终点。
 *  center：居中(常用)；
 *  space-between：两端对齐，项目之间的距离都相等（开头和最后的子元素，与父容器边缘之间么有间隔）
 *  space-around：每个项目的间隔相同，切两端间隙是项目间距的一半（开头和最后的项目，与父容器边缘有一定距离）

![20190930093941373.PNG][] ![20190930093944548.PNG][] ![20190930093947780.PNG][] ![20190930093951411.PNG][] ![20190930093954819.PNG][]

#### 5，align-items：定义项目在交叉轴如何对齐 ####

*  flex-start:交叉轴的起点对齐。
 *  flex-end：交叉轴的终点对齐。
 *  center：交叉轴的中点对齐。
 *  baseline：项目第一行文字基线对齐（文字的行高，字体大小会影响每行的基线）

这里以baseline为例；但图片还是按取值排列，所以对应的图片是最后一个

font-size：40px//改变第一个子元素的文字大小

<-- 父元素设置 -->
    	display: flex;
    	align-items:baseline;

![20190930100509954.PNG][] ![20190930100512929.PNG][] ![20190930100516762.PNG][] ![20190930100524144.PNG][]

#### 6，align-content:定义了多跟轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 ####

>>当项目换为多行时，可使用align-content取代align-items

*  flex - start：与交叉轴起点对齐。
 *  flex-end：与交叉轴终点对齐。
 *  center：与交叉轴中点对齐。
 *  space-between：两端对齐
 *  spance-around：每根轴线距离相等

display: flex;
    	align-content：flex - start

![20190930102157487.PNG][] ![2019093010220016.PNG][] ![2019093010220392.PNG][] ![20190930102216844.PNG][] ![20190930102221132.PNG][]

##### 关于父元素的属性就介绍到这里。还有一个小的知识点，是我在视频上看见的 #####

.parent{ float:flex}
      .child{ margin:auto}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2][] 这个的效果是上下居中，左右分散对齐的效果，感觉就像 `justify-content：space-around`和 `align-items：center`的结合体。  很常用

### 作为子元素的属性 ###

#### 1，order:定义项目的排列顺序。数值越小，排列越靠前。默认为 0 ####

.child_1{ order:2}
    	.child_1{ order:1}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_0][]

#### 2，flex-grow:定义放大比例。默认0。即如果存在剩余空间，也不放大 ####

>>这个可以说是个比例吧，当只有一个子元素设置时，即放大倍数，不过最好几个一起设置

.child_1{ flex-grow:1}
    	.child_2{ flex-grow:1}
    	.child_3{ flex-grow:2}
    	.child_4{ flex-grow:2}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 3][]

如图所示，子元素1,2,3,4都设置的这个属性，效果是在父元素宽度上进行分配。子元素3,4和子元素1,2的比例是1:2

#### 3，flex-shrink：定义了项目的缩小比例。默认为1；即如果空间不足，该项目将缩小 ####

>>这个吧，即在父元素缩小的时候，让这个子元素不缩小，取值试了一下，好像是0-1，如果取值为0.5的话，即子元素最小缩小50%，为0则不能缩小，当然了，如果设置的总宽度超过了父元素，则会在父元素之外显示

.child{ flex-shrink:0}

![在这里插入图片描述][20190930112452900.PNG]

#### 4,flex-basic:项目占据的主轴空间（如过主轴为水平，则设置这个属性，相当于设置宽度，原有width失效） ####

.child_1{ flex-basis: 200px;}

![在这里插入图片描述][20190930164430298.PNG]

#### 5，flex：此属性是flex-grow，flex-shrink和flex-basic的简写，默认值 0 1 auto，后两个属性可选 ####

### 基础代码如下 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>弹性布局</title>
    		<style type="text/css"> * { font-size: 30px; } .parent { width: 500px; height: 500px; border: 1px solid red; } .child_1 { width: 50px; height: 50px; background: pink; } .child_2 { width: 50px; height: 60px; background: blue; } .child_3 { width: 50px; height: 70px; background: gray; } .child_4 { width: 50px; height: 80px; background: red; } .child_5 { width: 50px; height: 90px; background: yellow; } </style>
    	</head>
    	<body>
    		<div class="parent">
    			<div class="child child_1">1</div>
    			<div class="child child_2">2</div>
    			<div class="child child_3">3</div>
    			<div class="child child_4">4</div>
    			<div class="child child_5">5</div>
    		</div>
    	</body>
    </html>

结果如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 4]

[2019093008494244.PNG]: /images/20230810/10c5b93eb9514d4e97e8106995f0f44f.png
[20190930084945314.PNG]: https://img-blog.csdnimg.cn/20190930084945314.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190930084948214.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: /images/20230810/c171dfbc79ab4c569a92ebcc0ff84820.png
[2019093009165766.PNG]: https://img-blog.csdnimg.cn/2019093009165766.PNG
[20190930091613161.PNG]: https://img-blog.csdnimg.cn/20190930091613161.PNG
[2019093009162137.PNG]: /images/20230810/0caaf9f782ff4ae99efc3c113162b81a.png
[20190930093941373.PNG]: https://img-blog.csdnimg.cn/20190930093941373.PNG
[20190930093944548.PNG]: https://img-blog.csdnimg.cn/20190930093944548.PNG
[20190930093947780.PNG]: https://img-blog.csdnimg.cn/20190930093947780.PNG
[20190930093951411.PNG]: https://img-blog.csdnimg.cn/20190930093951411.PNG
[20190930093954819.PNG]: /images/20230810/32aa6eb1232348f0954a56352e04b74e.png
[20190930100509954.PNG]: https://img-blog.csdnimg.cn/20190930100509954.PNG
[20190930100512929.PNG]: https://img-blog.csdnimg.cn/20190930100512929.PNG
[20190930100516762.PNG]: https://img-blog.csdnimg.cn/20190930100516762.PNG
[20190930100524144.PNG]: /images/20230810/dd24a13d6ad2436fbc38f9f81843bd47.png
[20190930102157487.PNG]: https://img-blog.csdnimg.cn/20190930102157487.PNG
[2019093010220016.PNG]: https://img-blog.csdnimg.cn/2019093010220016.PNG
[2019093010220392.PNG]: https://img-blog.csdnimg.cn/2019093010220392.PNG
[20190930102216844.PNG]: https://img-blog.csdnimg.cn/20190930102216844.PNG
[20190930102221132.PNG]: /images/20230810/7d1d3dc6f4ef45e6be97af94c3c3f752.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2]: /images/20230810/5353d8428b2848d2ae0c4efc88f435d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_0]: /images/20230810/16cc526d367748caa10733f552610c3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 3]: /images/20230810/054ab238794e4d968085458a09b35573.png
[20190930112452900.PNG]: /images/20230810/1d419f94e161471b90133623db5a8f53.png
[20190930164430298.PNG]: /images/20230810/7817a72fab9c4972bb00e55321fda183.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 4]: /images/20230810/13a01053b22c4d01a1ff06c699b9c7b7.png