Flex

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

要为元素指定为弹性布局,只需添加display: flex属性,添加弹性布局的元素称为容器,它的所有子元素自动按照弹性布局排列。

容器有以下属性,用以规定它的子元素排列、对齐规则:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

另外,作为容器的子元素,称为“flex项目”,它们也有自己的属性,用来决定自身的排列、对齐规则:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • align-self

了解到这些属性,接下来再详细了解这些属性以及它们对应的各种属性值用来作何作用

容器的属性

flex-direction

该属性有四个值,规定子元素的排列方向:

  • row(默认) : 规定元素从左至右排列
  • row-reverse: 规定元素从右至左排列
  • column:规定元素从上至下排列
  • column-reverse:规定元素由下至上进行排列

direction的四种值

flex-wrap

该属性有三个值,规定子元素的换行规则:

  • nowrap(默认):元素始终在一行排列,不进行换行
  • wrap:元素超出后换行,超出元素在第一行下面
  • wrap-reverse:元素超出后换行,超出元素在第一行上面

flex-wrap的三种值

flex-flow

该属性通过flex-directionflex-wrap属性简写而来:

1
2
3
.container{
flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

该属性定义容器字元素基于flex-direction排列方向的水平对齐方式,它可能有六个值:

  • flex-start(默认):从排列方向的起始位置对齐
  • flex-end:从排列反向的末尾对齐
  • center:基于排列方向上水平居中
  • space-between:所有元素基于容器宽度两端对齐
  • space-around:均匀地分布在行中,两端各有一半大小的空间
  • space-evenly:所有子元素均匀的分散在容器中

justify-content的六种值

align-items

该属性定义容器基于flex-direction排列方向的垂直对齐方式,它可能有五个值:

  • stretch(默认):如果子元素未设置高度和auto,将沾满整个容器的宽度

  • flex-start:从排列方向的起始位置对齐

  • flex-end:从排列反向的末尾对齐

  • center:基于排列方向上水平居中

  • baseline: 基于所有子元素义一行文字的基线对齐

align-items的五个属性值

结构如下:

align-content

概述新定义了多个排列方向的对齐方式,它可能有六个值:

  • stretch(默认):如果子元素未设置高度和auto,将沾满整个容器的宽度

  • flex-start:从排列方向的起点对齐

  • flex-end:从排列方向的终点对齐

  • center:基于排列方向中点对齐

  • space-between:基于排列方向两端对齐

  • space-around:均匀地分布在行中,两端各有一半大小的空间

align-content的六个值

项目的属性

order

定义项目自身的排列顺序,数值越小,排列越靠前,默认为0

order

flex-grow

该属性定义项目自身方法比例,默认0,不会放大

如果各个项目的flex-grow属性值相等,则他们会等会剩余空间;值不相等,则他们会按照数字的倍数进行等分,即值为2分到的空间为1的2倍。

flex-shrink

该属性定义项目自身缩小比例,默认为1,如果空间不足,项目将会自动缩小

flex-shrink

如果定义所有项目不缩小,则他们会超出元素

flex-basis

通过定义该属性,可以覆盖项目自身的宽度,默认值为auto,即项目自身的大小

flex

该属性是作为以上三种属性flex-grow,flex-shrink,flex-basis的简写方式,默认值为0 1 auto,它有两个简写值autonone分别对应1 1 auto0 0 auto

align-self

该属性定义项目自身与其他项目不一样的对齐方式,即覆盖align-items属性,定义自身的对齐方式,它与align-items具有相同的属性值,默认值为auto,即默认继承容器规定的对齐方式
align-self

结语

flex布局发展到现在,已经成为前端主流布局首选方案,记录本文跟着代码再实现一遍,受益良多。

最后再补上一张浏览器的支持情况,基本已兼容现代各种主流浏览器