弹性盒子

Flexbox（CSS Flexible Box Layout，弹性盒布局）是 CSS 中用于一维排版的布局模型：在一条主轴上排列、对齐子项，并分配剩余空间；子项尺寸可以是未知或动态的。

在 Flexbox 普及之前，垂直居中、等高列、均分剩余宽度等需求往往要借助浮动、table-cell、position 等技巧。Flexbox 用「容器 + 主轴/交叉轴」统一了这类问题。需要同时控制行与列时，应优先考虑 Grid 网格布局；子项尺寸与 盒模型（含 box-sizing）仍会影响 flex 计算结果。

交互式图解：Flexbox 可视化指南。

核心概念：容器与项目

设为 flex 容器后，直系子项默认表现为（等价于 flex: 0 1 auto）：

• flex-direction: row，沿主轴单行排列，flex-wrap: nowrap 时不换行；
• flex-grow: 0 不主动伸长，flex-shrink: 1 空间不足时可缩小；
• align-items: stretch，交叉轴方向拉伸（在交叉轴尺寸为 auto 时）。

Flex 容器会建立 flex 格式化上下文，其子项之间的垂直外边距不会发生折叠（参见 盒模型 · 外边距折叠）。

主轴与交叉轴

Flexbox 沿一条轴做主要空间分配，另一维由交叉轴对齐或拉伸处理：

默认 flex-direction: row 且为中文横排（LTR）时：主轴多为水平、交叉轴多为垂直。改为 column 后，主轴变为垂直，「水平居中 / 垂直居中」应对应到 主轴 / 交叉轴 上的属性，而非固定方向。

flex-direction: row（默认）          flex-direction: column

  主轴 →                              主轴 ↓
  ┌───┬───┬───┐                       ┌───┐
  │   │   │   │  ↑ 交叉轴              │   │
  └───┴───┴───┘  ↓                    ├───┤
                                      │   │
                                      └───┘

容器属性（写在父元素上）

display

• flex：块级 flex 容器。
• inline-flex：行内级 flex 容器。

flex-direction / flex-wrap / flex-flow

• row（默认）/ row-reverse / column / column-reverse：主轴方向。
• nowrap（默认）/ wrap / wrap-reverse：是否换行；nowrap 时项目可能被压缩或溢出。
• flex-flow：flex-direction 与 flex-wrap 的简写，如 flex-flow: row wrap。

换行后，每一行可视为一条新的主轴轨道；justify-content 作用于当前行内项目沿主轴的分布，align-content 才作用于多条轨道在交叉轴方向的分布。

justify-content（主轴对齐与间距）

• flex-start / flex-end / center
• space-between：首尾贴容器边，项目之间均分空隙（首尾无额外间隙）
• space-around：每个项目左右（沿主轴）各有一半空隙，首尾也有半隙
• space-evenly：所有空隙（含首尾）相等

align-items（单行内，项目在交叉轴上的对齐）

• stretch（默认）：交叉轴尺寸为 auto 时拉伸至填满容器交叉轴（row 下常表现为等高；已设固定交叉轴尺寸则不拉伸）
• flex-start / flex-end / center / baseline

align-content（多行时，轨道在交叉轴上的分布）

仅在 flex-wrap: wrap（或 wrap-reverse）且存在多条主轴轨道时有可见效果；只有一行时设置 align-content 一般看不出变化。取值与 justify-content 类似（flex-start、center、space-between 等）。

gap

gap / row-gap / column-gap：项目之间、行与行之间的间距；减少可用于 flex 分配的剩余空间，但不改变对齐规则。可优先于给每个子项加 margin。

place-items / place-content（简写）

• place-items: <align-items> <justify-items>（flex 中 justify-items 多为 stretch，常用的是 align-items 部分）
• place-content: <align-content> <justify-content>：同时写交叉轴轨道分布与主轴对齐

项目属性（写在子元素上）

flex（flex-grow / flex-shrink / flex-basis）

flex-grow / flex-shrink 为无单位非负数，按比例分配剩余空间或收缩量；flex-basis 为分配前的初始主轴尺寸。

align-self

覆盖容器的 align-items，只影响当前项目。

order

改变视觉顺序（数值小的靠前）；不改变 DOM 顺序与屏幕阅读器朗读顺序，勿用于关键交互顺序。

典型场景

水平垂直居中（默认 row）

容器需有明确的交叉轴空间（如固定 height 或 min-height）：

.container {
    display: flex;
    justify-content: center; /* 主轴居中 */
    align-items: center; /* 交叉轴居中 */
}

flex-direction: column 时：垂直分布看 justify-content，水平对齐看 align-items。

Sticky Footer

.page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh; /* 全屏高度；见 [字体单位 · dvh](/knowledge/booklet/web/css/font-unit) */
}
.main {
    flex: 1; /* 占据剩余高度 */
}

等高列与均分宽度

• 等高：row + align-items: stretch（默认），同一行内交叉轴尺寸一致。
• 均分：多个子项 flex: 1 或不同 flex-grow 分配主轴剩余空间。

响应式

flex-wrap: wrap + gap + 媒体查询；复杂二维排版用 Grid。

常见注意点

• 默认 min-width: auto / min-height: auto 会使 flex 项不易缩小到小于内容，导致溢出；需允许收缩时可设 min-width: 0（或按场景用 overflow、min-height: 0）。
• justify-content / align-items / align-content 写在容器；flex / align-self / order 写在项目。
• 仅一行时别指望用 align-content 调间距；多行间距用 align-content 或 gap。
• flex: 1 分配的是剩余空间；若需「按内容宽再伸缩」，用 flex: auto 或显式 flex-basis。

总结

• Flexbox 是一维布局：先定 flex-direction，再用 justify-content（主轴）、align-items（交叉轴）对齐。
• 多行时用 align-content 分布轨道；间距优先 gap。
• 默认子项 flex: 0 1 auto；flex: 1 适合均分剩余空间与 Sticky Footer。
• 与 Grid 组合：页面骨架用 Grid，组件内一行控件用 Flex。

参考文献

以下链接在编写时均可正常访问：