图解flex布局

说明：本文在内容结构部分引用自阮一峰-Flex 布局教程，但大部分内容做了修改和补充，并且重绘了所有图例。

1 什么是flex布局？

flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任意容器都可以定义为flex布局：

display: flex;

还有一种方式为display: inline-flex; 可以给行内元素添加flex布局，inline-flex和inline-block一样，对内部元素来说是个display: flex 的容器，对外部元素来说是个inline的块。

需要注意的是：容器被设为flex布局以后，子元素的float 、clear 和vertical-align属性将失效。

2 基本概念

采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”，如下图所示：



其中flex容器的包含水平主轴main axis和垂直交叉轴cross axis，容器中的项目默认从左到右按水平主轴的方向排列。每个flex项目的高度叫项目垂直高度cross size，宽度叫做项目水平宽度main size。

flex布局主要是设置flex容器的对齐方式和flex项目的大小形态，上图中的四个概念十分重要。

3 容器的属性

给容器设置display: flex;后，可以为其添加如下容器属性：

• flex-direction：主轴方向；
• flex-wrap：项目换行方式；
• flex-flow：flex-direction属性和flex-wrap属性的简写形式；
• justify-content：项目在主轴的对齐方式；
• align-items：项目在交叉轴的对齐方式；
• align-content：多轴线对齐方式。

3.1 flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向），伪代码如下：

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它有四种取值：

• row（默认值）：主轴为水平方向，从左到右排列。

• row-reverse：主轴为水平方向，从右到左排列，与row排列方向相反。

• column：主轴为垂直方向，从上到下排列。

• column-reverse：主轴为垂直方向，从下到到排列，与column排列方向相反。

3.2 flex-wrap

默认情况下，项目都排列在一条轴线上。flex-wrap属性定义，如果一条轴线排不下的换行方式。伪代码如下：

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它有三种取值：

• nowrap（默认）：不换行，即使一行放不下所有项目，任然不换行显示，而是会自动缩小所有项目的宽度使所有项目能够放置在一行。

• wrap：换行，第一行项目排列在上方。

• wrap-reverse：换行，第一行项目排列在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。伪代码如下：

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content

justify-content属性定义了项目在主轴上的对齐方式。伪代码如下：

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

它有六种常见取值：

• flex-start（默认值）：项目左对齐：

• flex-end：项目右对齐：

• center：项目居中对齐：

• space-between：两端对齐，项目之间的间隔都相等：

• space-around：空格环绕：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍：

• space-evenly：空格均分：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔也相等：

3.5 align-items

align-items属性定义项目在交叉轴上如何对齐。伪代码如下：

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它有五种取值：

• flex-start：项目与交叉轴的起点（上边缘）对齐。

• flex-end：项目与交叉轴的终点（下边缘）对齐。

• center：项目与交叉轴的中点对齐。

• baseline：项目的第一行文字的基线对齐。

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度，若设置了项目的高度，则按照设置的高度。

3.6 align-content

align-content属性定义了多根轴线（容器中项目多行排列，每行排列叫做一根轴线）的对齐方式。如果项目只有一根轴线，该属性不起作用。伪代码如下：

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch ;
}

它有七种取值，align-content和justify-content的属性非常相似，若读者熟悉justify-content，那么align-content的属性非常好理解：

• flex-start：项目与交叉轴的起点（上边缘）对齐：

• flex-end：项目与交叉轴的终点（下边缘）对齐：

• center：项目与交叉轴的中线对齐：

• space-between：项目与交叉轴两端对齐，轴线之间的间隔平均分布：

• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与容器边缘的间隔大一倍：

• space-evenly：每根交叉轴之间的间隔平均分配：

• stretch（默认值）：当项目没有设置高度时，轴线占满整个交叉轴。

4 项目的属性

上面所讲的容器属性都是用来设置项目的排列方式，而项目自身的大小和形态需要设置项目的属性：

• order：定义项目的排列顺序。数值越小，排列越靠前，默认为0；
• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex：flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

4.1 order

默认情况下，项目的排列先后顺序是按照DOM结构中出现的先后顺序显示的，而order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。伪代码如下：

.item {
  order: <integer>;
}

4.2 flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。伪代码如下：

.item {
  flex-grow: <number>; /* default 0 */
}

以下是flex-grow属性的基本用法：

此外flex-grow属性还可以用于倍数关系：

用于倍数关系时，需要注意项目不能缩小到比原来的宽度还要小：

4.3 flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。伪代码如下：

.item {
  flex-shrink: <number>; /* default 1 */
}

4.4 flex-basis

flex-basis属性定义了在分配主轴多余宽度之前，项目的初始宽度。浏览器根据这个属性，计算主轴是否有多余宽度。它的默认值为auto，即项目的本来的宽度。伪代码如下：

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex-basis属性可以看作width属性的替代品，但是flex-basis属性比width属性的优先级要高，若一个项目同时设置了flex-basis和width，那么生效的是flex-basis。推荐阅读：CSS width vs flex-basis。

4.5 flex

flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto（默认缩小但不放大）。后两个属性可选。伪代码如下：

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex属性的常见简写如下：

1. flex: 1：等价于flex: 1 1 auto，即等价于单独设置flex-grow: 1；
2. flex: auto：等价于flex: 1 1 auto；
3. flex: none：等价于flex: 0 0 auto。

4.6 align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。伪代码如下：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

使用方法可以参照3.5节中的align-items属性用法，下面举个例子，每个项目可以单独设置自己的交叉轴对齐方式：

5 总结

理解flex布局，主要要理解容器和项目两个概念，给容器设置属性用来决定容器中的项目如何排列，如主轴方向、是否换行、主轴和交叉轴的对齐方式等，可以理解为宏观的设定。而给项目设置属性用来决定项目的大小形态顺序，可以理解为微观的设定。

最后推荐一个flex布局可视化工具：https://loading.io/flexbox