Flex弹性布局详解

Dear 丶 2022-02-05 00:09 560阅读 0赞

### Flex弹性布局 ###

说明：重点是分清楚主轴方向、侧轴方向的设置，作用在父元素和作用在子元素上的属性。

#### (1)控制方向 ####

flex-direction控制主轴方向，取值有row(默认) |row-reverse | column | column-reverse(垂直方向翻转)

align-items控制侧轴方向，取值有strenth(默认) | flex-start(顶部对齐) |flex-end(底部对齐) |center(居中对齐)

#### (2)控制换行 ####

flex-wrap用于控制换行，取值有nowrap(默认，不换行) | wrap(宽度不足换行) | wrap-reverse(向上换行)

#### (3)综合主轴方向与换行 ####

flex-flow可设置两个值，主轴方向与换行

#### (4)控制子项 ####

justify-content 控制主轴方向子项的对齐和分布方式，对齐方式的取值有flex-start(默认) | flex-end |center ，分布方式(主要是对空白位置的分配)的取值有space-between | space-around | space-evently

align-items 控制侧轴方向子项的对齐和分布方式，取值与justify-content，但要注意是在多行的情况下才看得出效果。

#### (5)综合实例 ####

加入CSS样式，先将主轴、侧轴、换行设置为默认值

.father{ 
    			width:500px;
    			height:500px;
    			border:1px solid red;
    			display:flex;
    			/*主轴方向*/
    			flex-direction:row;
    			/*设置换行*/
    			flex-wrap:no-wrap;
    			/*设置侧轴方向*/
    			align-items:strenth;
    		}
    		.son{ 
    			width:100px;
    			height:100px;
    			background-color:lightblue;
    			border:1px solid red;
    		}

此时在浏览器中的显示效果为：

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

将主轴方向和换行进行更改：

/*主轴方向*/
    			flex-direction:row-reverse;
    			/*设置换行*/
    			flex-wrap:wrap;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]  
发现进行了换行，并且水平方向顺序反转。

再对侧轴方向进行设置：

/*设置侧轴方向*/
    			align-items:center;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]

发现垂直方向对齐。

再对主轴方向上子元素的对齐方式进行设置：

/*设置主轴子项的对齐方式*/
    			justify-content:center;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]

再读侧轴方向上的子元素进行设置：

/*设置侧轴方向的对齐方式*/
    			align-content:center;

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

将侧轴方向子元素的分布方式进行更改：

/*设置侧轴方向子元素的分布方式*/
    			align-content:space-between;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]

继续将侧轴方向子元素的分布方式进行更改：

/*设置侧轴方向的对齐方式*/
    			align-content:space-around;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]

最后重新进行一个综合的设置

/*主轴方向*/
    			flex-direction:row-reverse;
    			/*设置换行*/
    			flex-wrap:wrap;
    			/*设置侧轴方向*/
    			align-items:flex-start;
    			/*设置主轴子项的对齐方式*/
    			justify-content:center;
    			/*设置侧轴方向的对齐方式*/
    			align-content:space-evently;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 7]

接下来对每一个属性的作用进行说明：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 8]

主轴方向：flex-direction:row-reverse; 水平方向反转，紫色箭头即是其作用

侧轴方向：align-items:flex-start; 头部对齐，贴着父盒子顶部，绿色箭头即使其作用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 9]

主轴子项的对齐方式：justify-content:center; 使左右两边留出相同的空白，绿色框即是作用的效果  
侧轴方向的对齐方式：align-content:space-evently; 使垂直方向的空白平均分布，黄色框即是作用的效果

#### (6)总结 ####

flex-start , flex-end , center分别对应着顶部对齐，底部对齐，居中对齐；

space-between ,space-around,apace-evently是对空白部分的处理

#### (7)作用在flex子项上的属性 ####

##### 1)order:number 改变某一子元素的排序位置，默认为0，数值越大越靠后 #####

给上面的元素添加CSS样式：

.father{ 
    			width:500px;
    			height:500px;
    			border:1px solid red;
    			display:flex;
    			/*主轴方向*/
    			flex-direction:column;
    			/*设置换行*/
    			flex-wrap:wrap;
    			/*设置侧轴方向*/
    			align-items:flex-start;
    			/*设置主轴子项的对齐方式*/
    			justify-content:center;
    			/*设置侧轴方向的对齐方式*/
    			align-content:space-between;
    
    		}
    		.son{ 
    			width:100px;
    			height:100px;
    			background-color:lightblue;
    			border:1px solid red;
    		}

改变上面第三个子div的排序

.son:nth-child(3){ 
    			order:10;
    		}

此时在浏览器中显示的效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 10]

发现第三个元素已经到了第四个元素的后面。

再将第一个元素的次序进行改变：

.son:nth-child(3){ 
    			order:10;
    		}
    		.son:nth-child(1){ 
    			order:100;
    		}

此时在浏览器中显示的效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 11]

发现第一个元素排到了最后面，说明值越大排序越靠后。

##### 2)flex-basis用于给当前元素预留空间(同时设置高度的话高度会被覆盖) #####

在上面的基础上为第三个元素添加flex-basis属性

.son:nth-child(3){ 
    			flex-basis:20px;
    		}

此时在浏览器中显示的效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 12]

##### 3)flex:num用于均分空间(或剩余空间),num为占据的份数，总分数由所有设置了flex属性的子元素数值的加总 #####

继续在上面的基础上为第一，第二个子div元素添加flex属性：

.son:nth-child(1){ 
    			flex:1;
    		}
    		.son:nth-child(2){ 
    			flex:2;
    		}

此时在浏览器中显示的效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 13]

将除第三、第四个子div占据的空间分成三份，第一个元素占了一份，第二个元素占据了两份

--------------------

热爱技术，热爱分享，一起学习，一起进步。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: /images/20220205/87e527747be646428a00add0bac93747.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]: /images/20220205/eb5da7bd639f4da793f678af41bb29ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]: /images/20220205/dc777e0abab64077939eea479c61c406.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]: /images/20220205/795398f7306c4f7ca65909522d8887e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 4]: /images/20220205/db1ec82405f74456ab84f36c3bfba0e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]: /images/20220205/af326822884b46b49c7a41bf8811754b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]: /images/20220205/7661aa7d6d524db9be7cd6fb94482d4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 7]: /images/20220205/14fe25222a0e4d3ba3e946dbaf8ce76e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 8]: /images/20220205/1b94839a88b94d7fbba8d2f42777bd40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 9]: /images/20220205/43b3d43062a44482a4d4128414f9c83e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 10]: /images/20220205/e0a0f772ecef43988840ce0607795258.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 11]: /images/20220205/e0b9e82b1dc14eb1a1b890e29bab95d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 12]: /images/20220205/da09262605bb40c5868def06235f3308.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 13]: /images/20220205/ec7284a025f743509f0cfd6d86a2fe50.png