adiynil

css中，flex、grid 各种布局都是我们必须掌握的，作为常用功能又强大的flex布局你还没学会吗，全文没有一张图，用最通俗易懂的语言教你怎么用css中的flex布局。

父容器属性

开启flex

1

display: flex;

控制子元素水平方向对齐

1

justify-content: flex-start/center/flex-end/space-between/space-around/space-evenly;

flex-start/center/flex-end 子元素之间没有留白

space-between/space-around/space-evenly 子元素之间留白相等

• flex-start => [ a b c ######## ]
• center => [ #### a b c #### ]
• flex-end => [ ######## a b c ]
• space-between => [ a ### b ### c ] (两端无留白)
• space -evenly => [ ## a ## b ## c ## ] (两端留白和子元素之间留白相等)
• space-around => [ # a ### b ### c # ] (两端留白是子元素之间留白的一半)

以上是针对于父容器的flex-direction属性为行模式的时候

列模式时，justify-content和align-items的作用倒转过来，分别是

• justify-content => 控制垂直方向对齐
• align-items => 控制水平方向对齐

[什么是行模式和列模式？](#### 行模式&列模式)

控制子元素垂直方向对齐

1

align-items: flex-start/center/flex-end/stretch/baseline;

• flex-start/center/flex-end 和上边类似，就是方向换成垂直方向
• baseline => 按照文字基线对齐
• stretch => 子元素拉伸并在垂直方向铺满父容器

以上是针对于父容器的flex-direction属性为行模式的时候

列模式时，justify-content和align-items的作用倒转过来，分别是

• justify-content => 控制垂直方向对齐
• align-items => 控制水平方向对齐

[什么是行模式和列模式？](#### 行模式&列模式)

控制子元素排列方式

1

flex-direction: row/column/row-reverse/column-reverse;

• row => 按行排列从左到右
• row-reverse => 按行排列从右到左
• column => 按列从上到下，子元素的宽度不需要撑满父容器
• column-reverse => 按列从下到上，子元素的宽度不需要撑满父容器

行模式&列模式

• 父容器的flex-direction属性为row/row-reverse => 行模式
• 父容器的flex-direction属性为column/column-reverse => 列模式

控制子元素的折行

1
2

flex-wrap: wrap/nowrap;
align-content: flex-start/flex-end/center/space-between/space-evenly/space-around;

当flex-wrap的值为wrap的时候，折行的部分由align-content的属性来控制，其值的作用可参考justify-conten，当然了，折行发生的条件是子元素的宽度固定且不能收缩，并且超过了父容器的宽度

子元素属性

子元素覆盖父容器的排列方式

1
2

align-seft: flex-start/center/flex-end/stretch/baseline;
margin: auto;

• align-seft => 覆盖父容器设置的align-items属性
• margin => 覆盖父容器的justify-content属性

子元素的空间占比

1

flex: 1;

• flex属性的值表示该子元素占父容器的空间比，总容量是所有子元素的flex属性和

子元素的增长

1

flex-grow: 1;

flex-grow属性是指当父容器的空间还有空余的时候，子元素主动增长去撑满这些空余空间(行模式下是宽度，列模式下是高度)，而占这些空余空间的比列就是由flex-grow的值来决定的，默认不设置flex-grow的情况下，值为0，子元素不会主动增长

当把所有的子元素的flex-grow都设置成相等 => [ a-a-a b-b-b c-c-c]

或者中间的子元素的flex-grow是两边的子元素flex-grow的两倍 => [ a-a b-b-b-b c-c]

子元素的收缩

1

flex-shrink: 1;

flex-shrink属性和flex-grow属性相似，只不过作用在于收缩的时候，flex-shrink越大的子元素在收缩的时候收缩的高度/宽度更大，默认不设置flex-shrink的情况下，值为1，子元素收缩且收缩比例为1

中间的子元素的flex-shrink是两边子元素flex-shrink的两倍 :

[ a-a-a-a-a-a b-b-b-b-b-b c-c-c-c-c-c- ] -> [ a-a-a-a b-b c-c-c-c ]

子元素的宽度/高度

1

flex-basis: 200px;

• 行模式 => flex-basis控制子元素的宽度
• 列模式 => flex-basis控制子元素的高度

[什么是行模式和列模式？](#### 行模式&列模式)

• 行模式下，如果设置了flex-basis，则子元素设置的width属性不会生效，flex-basis没有设置的情况下默认值为auto，也就是由内容决定
• 列模式下，如果设置了flex-basis，则子元素设置的height属性不会生效，flex-basis没有设置的情况下默认值为auto，也就是由内容决定

但是，虽然width/height属性会被覆盖，我们依然可以用min-width/min-height来限制最小宽高

子元素的flex属性

1

flex: 0 1 auto;

flex属性的值其实就是flex-grow、flex-shrink、flex-basis 这3种属性的缩写，默认值就是0 1 auto，也就对应

1
2
3

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

即不增长，收缩比例为1，宽度/高度为内容的宽度/高度