Web前端入门第 35 问：CSS 细说 flex 弹性盒子布局（多图）

flex 作为现代布局方案中最常用的手段，有必要拉出来细说。

flex 相关的 CSS 属性

容器（父元素）相关的 CSS 属性

以下的 CSS 属性，在 flex 布局中需喂给父元素，设置 flex 布局中的盒子相关样式。

display 启用 flex 布局

flex-direction 主轴方向

flex-wrap 控制子元素是否换行

flex-flow 简写属性（flex-direction + flex-wrap）

justify-content 主轴对齐方式

align-items 交叉轴对齐方式（单行）

align-content 交叉轴对齐方式（多行）

gap 子元素间距

子元素相关的 CSS 属性

以下 CSS 属性，在 flex 布局中喂给子元素，用于设置单个子元素的特殊样式。

order 排列顺序

flex-grow 放大比例

flex-shrink 缩小比例

flex-basis 初始大小

flex 简写属性（flex-grow + flex-shrink + flex-basis）

align-self 覆盖容器的 align-items

开篇

flex 多用于一维布局，即横向或纵向排列，二维布局是 flex 短板，也不是说不能用，只是没那么灵活。

flex 布局第一步，必须设置容器的 display 属性为 flex 或 inline-flex，这样子元素才会按照弹性盒子的方式进行排列。

容器

flex 与 inline-flex 的区别

display: flex 是让容器显示为块级弹性盒子独占一行，而 display: inline-flex 是让容器显示为内联块弹性盒子，可以与其他元素并排显示。

它们与 display: block 和 display: inline-block 类似，都是块级元素与内联块元素区别。

display: flex

display: inline-flex

flex-direction 控制子元素排列方向

默认情况下，flex 布局是横向排列的，即子元素从左到右排列（需特别注意，如果设置了 direction: ltr; ，则显示方向相反）。

可通过 flex-direction 控制子元素排列方向。不同值的效果区别如下：

reverse 都表示反向排列。

flex-wrap 控制子元素换行

默认情况 flex 子元素在超出容器时，会被挤压到同一行里面显示，如果需要元素换行，可派 flex-wrap 上场。不同值区别：

wrap-reverse 是 wrap 的反向版本，会将行的顺序反向显示。

flex-flow

简写属性，可单独设置某一个值，也可同时设置 flex-direction 和 flex-wrap，值的顺序无影响，flex-direction 和 flex-wrap 都能放在第一位。

使用 flex-flow 设置 flex-direction：

.box {
  flex-flow: row;
  flex-flow: column;
}

使用 flex-flow 设置 flex-wrap：

.box {
  flex-flow: nowrap;
  flex-flow: wrap;
}

使用 flex-flow 同时设置 flex-direction 和 flex-wrap：

.box {
  flex-flow: row nowrap;
  flex-flow: wrap column; /* 顺序不影响渲染 */
  flex-flow: column-reverse wrap-reverse;
}

justify-content 主轴对齐方式

3 组看起来没啥区别的值 [start, end] 、 [flex-start, flex-end] 、 [left, right]

添加 direction: rtl; 之后，可以看出 left 、 right 区别：

[start, end] 和 [flex-start, flex-end] 没找到有啥区别，可能唯一不同 [start, end] 是后来新增的 CSS 规则，由于规范较新，Chrome 2021年之后才支持。

其他值区别：

justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 两边留白 */
justify-content: space-around; /* 每个子元素左右间距都相同 */
justify-content: space-evenly; /* 每个留白的空间等分相同 */

stretch 也是看起来跟默认值没啥区别~~

safe 与 unsafe

按照 MDN 说法：

safe 如果元素溢出对齐容器，则元素将按照对齐模式为 start 进行对齐。所期望的对齐将不会被实现。

unsafe 即使元素溢出对齐容器，也会实现所需的对齐方式。与 safe 不同，safe 会忽略所要求的对齐方式以防止溢出。

使用方法：

justify-content: safe center;
justify-content: unsafe center;

效果：

align-items 交叉轴对齐方式（单行）

定位对齐几种方式：

跟 justify-content 一样，几个 start 和 end 没找到有啥区别~~

其他几个值：

设置 stretch 会把未设置高度的元素拉伸撑满容器。 safe 和 unsafe 与 justify-content 一样

align-content 交叉轴对齐方式（多行）

与 justify-content 属性一样，只是对齐方式换成了垂直方向。

就不再一一列举了，直接看几个常用的属性：

gap 子元素间距

gap 用于设置子元素水平间距和垂直间距，可将任何 CSS 支持的单位值喂给它，比如：10px、10%、10em、10rem、10vw、10vh。

gap: 20px; /* 等价于 gap: 20px 20px; */
gap: 50%; /* 等价于 gap: 50% 50%; 表示相对于容器大小的宽度50% 高度50% */

子元素

order 排列顺序

可使用 order 控制元素顺序：

值越小，越靠前，默认值是 0，可为负数。

.box .item:nth-child(1) {
  order: 3;
}
.box .item:nth-child(2) {
  order: 1;
}
.box .item:nth-child(3) {
  order: -1;
}

显示效果：

flex-grow 控制元素放大比例

默认值为 0 元素不会放大，可通过设置 flex-grow 控制放大系数，不可为负数。

其放大比例是所有子元素 flex-grow 值相加平分剩余空间，比如：

所有子元素都是 1，那就是所有子元素平分。

第一个子元素是 1，那就是第一个元素占剩余空间的 100%。

第一个子元素是 1，第二个子元素是 2，那么第一个子元素占 1 等份，第二个子元素占 2 等份。

flex-shrink 控制元素缩小比例

默认值为 1，在元素溢出容器时，所有子元素都等比例缩小，可通过设置 flex-shrink 控制缩小系数，不可为负数，设置为 0 表示禁止元素缩放。

计算方式与 flex-grow 一致。

flex-basis 控制元素大小

默认 flex-basis 控制元素宽度，flex-direction: column 则控制元素高度。

flex-basis 默认值 auto，表示元素大小由 width 或 height 控制，可食用所有 CSS 支持的单位值。

如果同时设置了 width 和 flex-basis ，flex-basis 优先级更高。

content 根据弹性项的内容自动调整大小。

max-content 元素内容"自然舒展"时的理想宽度。

min-content 元素内容"紧巴巴"排列时的最小宽度。

fit-content 设定包含块内容区域的最大可能尺寸，该尺寸受最小内容（min-content）和最大内容（max-content）值的约束，并根据当前元素的实际内容动态计算得出。

flex

简写属性，可同时包含 flex-grow 、 flex-shrink 、 flex-basis，用法：

完整写法顺序为 flex: grow shrink basis; 分别表示：放大比例，缩小比例，元素大小。

flex: 2; /* 等价于 flex: 2 1 0; */
flex: 1; /* 等价于 flex: 1 1 0; */
flex: 10px; /* 等价于 flex: 1 1 10px; */
flex: 1 30px; /* 等价于 flex: 1 1 30px; */
flex: 2 2; /* 等价于 flex: 2 2 0; */
flex: 2 2 10%; /* 写全属性 */

align-self 控制单个元素的对齐方式

align-self 可覆盖容器的 align-items 属性，其属性值与 align-items 相同：

总结

就目前来看 flex 布局比 grid 布局应用得更多，虽然 grid 是终极手段，但由于兼容性问题，反而是 flex 应用更广泛。

虽然 flex 规范出现的时间较早，但由于 CSS 版本不停迭代，目前也有一些较新的 属性值，如果要求兼容低版本浏览器，建议使用前先查阅相关兼容性文档。