相关问题：

• 对 CSS 弹性布局的理解？

概念

弹性布局（Flexible Box， flex ）可以帮助我们简单、完整、响应式的实现各种页面的布局。

采用 flex 布局的元素，称为 flex 容器（container）。容器中所有的子元素会自动称为容器的成员，称为 flex 项目（item）。

容器中默认存在两条轴，主轴和交叉轴，呈九十度关系。项目默认沿着主轴排列。

常用属性

flex-direction 决定主轴的方向。

有以下的属性值：

• row ：默认值。主轴水平方向，起点在左端；
• orw-reverse ：主轴是水平方向，起点在右端；
• column ：主轴是垂直方向，起点在上端；
• column-reverse ：主轴是垂直方向，起点在下端；

flex-wrap 弹性盒子内的子元素沿着主轴排列，如果主轴排列不下，则根据该属性决定是否换行排列。

有以下的属性值：

• nowrap ：默认值，不换行；
• wrap ：换行，第一行在上方；
• wrap-reverse ：换行，第一行在下方；

flex-flow ：结合 flex-direction 和 flex-wrap 两种属性的简写方式；

flex-flow: <flex-direction> || <flex-wrap>

justify-content ：定义元素在主轴上的对齐方式。

有以下的属性值：

• flex-start ： 默认值，左对齐；
• flex-end ：右对齐；
• center ：居中对齐；
• space-between ：两端对齐，元素之间的间隔相同；
• space-around ：元素两侧间隔相同；

align-items ：定义项目在交叉轴上的对齐方式。

有以下的属性值：

• flex-start ：交叉轴的起点对齐；
• flex-end ：交叉轴的终点对齐；
• center ：交叉轴的中点对齐；
• baseline ：元素的第一行文字的基线对齐；
• stretch ：默认值。如果元素未设置高度或者高度为 auto ，则将占满整个容器的高度。

align-content ：定义多根轴线的对齐方式，如果容器中只有一根轴线，则该属性不起作用。

有以下的属性值：

• flex-start ：交叉轴的起点对齐；
• flex-end ：交叉轴的终点对齐；
• center ：交叉轴的中点对齐；
• space-between ：与交叉轴的两端对齐，轴线之间的间隔平均分布；
• space-around ：每根轴线的两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍；
• stretch ：默认值，轴线占满整个交叉轴。

order ：定义容器中元素的排列顺序，数值越小，排列越靠前，默认为 0 。

flex-grow ：当 flex-wrap: nowrap ，容器的宽度不够分的时候

详细

🗃 CSS 弹性盒子模型 | notebook (simon1uo.github.io)

参考

• flex - CSS（层叠样式表） | MDN (mozilla.org) (opens new window)