一文搞懂CSS Flex布局 - 阿飞的自留地

一文搞懂CSS Flex布局

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

父容器属性

开启flex

display: flex;

控制子元素水平方向对齐

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-contentalign-items的作用倒转过来,分别是

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

什么是行模式和列模式?

控制子元素垂直方向对齐

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

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

列模式时,justify-contentalign-items的作用倒转过来,分别是

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

什么是行模式和列模式?

控制子元素排列方式

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

行模式&列模式

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

控制子元素的折行

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

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


子元素属性

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

align-seft: flex-start/center/flex-end/stretch/baseline;
margin: auto;
  • align-seft => 覆盖父容器设置的align-items属性
  • margin => 覆盖父容器的justify-content属性

子元素的空间占比

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

子元素的增长

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]

子元素的收缩

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 ]

子元素的宽度/高度

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属性

flex: 0 1 auto;

flex属性的值其实就是flex-growflex-shrinkflex-basis 这3种属性的缩写,默认值就是0 1 auto,也就对应

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

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

添加新评论

电子邮件地址不会被公开,评论内容可能需要管理员审核后显示。