FlexFlexible Box的缩写,表示弹性布局,用来为盒子模型提供最大的灵活性。

任何一个容器都可以设定为flex布局:

1
2
3
.box {
display: flex;
}

设定为flex布局之后,子元素floatclearvertical-align属性将失效

采用flex布局的容器叫作flex容器,简称容器容器里的所有子元素成为flex项目,简称项目

采用了flex布局以后,容器项目分别有各自的属性。

为了更好地理解采用了flex布局后,容器不同属性的作用,我写了一个实时演示的小应用,可以很直观地演示容器的不同属性的作用。

演示地址:Flex 容器属性演示

源码仓库:[GitHub]

上方代表容器属性,中间按钮表示属性值,下方是展示区。因为flex-flowflex-direction属性和flex-wrap属性的连写方式(后文会介绍),故将flex-direction属性和flex-wrap属性放到了flex-flow下方。

接下来分别介绍各个容器属性项目属性的作用。

1. 容器属性

1. flex-direction

flex-direction决定主轴的方向,有 4 种取值:

  • row:默认,水平方向,左 → 右排列
  • row-reverse:水平方向,右 → 左排列
  • column:垂直方向,上 → 下排列
  • column-reverse:垂直方向,下 → 上排列

2. flex-wrap

flex-wrap决定项目在一条轴线排不下时如何换行,有 3 种取值:

  • nowrap:默认,不换行
  • wrap:换行,第一行在上方
  • wrap-reverse:换行,第一行在下方

3. flex-flow

flex-flowflex-direction属性和flex-wrap属性的连写方式,相当于两个属性简写成一个属性了。

默认值:flex-wrap: row nowrap;

4. justify-content

justify-content定义项目在主轴上的对齐方式,有 6 种取值:

  • flex-start:默认,左对齐(主轴水平)/上对齐(主轴垂直)

  • flex-end:右对齐(主轴水平)/下对齐(主轴垂直)

  • center:居中

  • space-between:两端对齐,项目之间间隔相等

  • space-around:每个项目两侧间隔相等

  • space-evenly:每个项目之间两端的间隔都相等

画得没那么标准,但应该能说明问题。使用Flex 容器属性演示来动态展示一下,能更好理解。

5. align-items

align-items定义项目在交叉轴(默认方向从上到下)上的对齐方式,有 5 种取值:

  • flex-start:交叉轴的起点对齐
  • flex-end:交叉轴的终点对齐
  • center:交叉轴的中心对齐
  • baseline:项目第一行文字的基线对齐
  • stretch:默认,项目未设置固定高度时,将被拉伸以适应容器

6. align-content

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

  • flex-start:交叉轴的起点对齐
  • flex-end:交叉轴的终点对齐
  • center:交叉轴的中心对齐
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布等
  • space-around:每根轴线两侧的间隔都相
  • stretch:默认,轴线占满整个交叉轴

2. 项目属性

1. order

order定义项目的排列顺序。

值为整数,数值越小,排列越靠前,默认为 0

2. flex-grow

flex-grow定义项目的伸缩比例,按照该比例给项目分配空间。

值为整数,数值越大,项目占据空间越大默认为 0

3. flex-shrink

flex-shrink定义项目的收缩比例,按照该比例给项目分配空间。

值为整数,数值越大,项目占据空间越小默认为 1

4. flex-basis

flex-basis定义在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。

默认为auto,即项目的原始尺寸

也可设置和widthheight属性一样的值,则项目将占据固定空间

5. flex

flexflex-growflex-shrinkflex-basis的连写方式,相当于 3 个属性简写成一个属性了。

默认值:flex: 0 1 auto;不伸缩,如果容器空间不足则等比例收缩。

6. align-self

align-self定义单个项目的对齐方式,可覆盖align-items属性,有 6 种取值:

  • auto:默认值,继承父元素的align-items属性,如果没有父元素,则等同于stretch
  • flex-start:交叉轴的起点对齐
  • flex-end:交叉轴的终点对齐
  • center:交叉轴的中心对齐
  • baseline:项目第一行文字的基线对齐
  • stretch:未设置固定高度时,将占满整个容器