Flex 下的对齐属性：主轴、交叉轴与作用范围
Flex 的对齐属性分属两条轴：主轴（flex-direction 指向，row 时横向）由 justify-content 分配剩余空间；交叉轴（垂直于主轴）由 align-items / align-self / align-content 控制。本页只讨论
flex 布局下的对齐：每个属性作用在哪条轴、是设容器还是单项、默认值是什么，以及哪几个属性在 flex 里根本不生效（它们属于 grid）。切换 flex-direction 会让主 / 交叉轴互换，下面实时观察。
一句话分轴： justify-* 管主轴、align-* 管交叉轴（这是 flex 的记法；grid 里 justify-* 改管行内轴）。其中 justify-content / align-items / align-content 设在容器上，align-self
设在单个 item 上覆盖 align-items。
1 · 切换属性，实时看布局
容器定宽定高，故主轴、交叉轴都有剩余空间可分配。item 高度/字号不一，便于看出交叉轴对齐差异。align-content 的判据是 flex-wrap 而非实际行数：规范把它的适用范围写作 multi-line flex container，而 multi-line 指的就是 flex-wrap: wrap | wrap-reverse。因此
wrap 下即使内容只占一行它照样生效——单行被默认值 stretch 拉满容器高度正是它在起作用，改成 center 该行会整体居中（Chrome 151 实测：300×200 容器内单个 item，stretch 时高 200px、center 时高 18px 且顶边落在 91px，核对于 2026-08）。只有
nowrap 时它对布局无影响。
2 · flex 下的对齐属性一览
| 属性 | 作用轴 | 作用对象 | 默认值 | 备注 |
|---|---|---|---|---|
justify-content |
主轴 | 容器 | normal(≈ flex-start) |
把主轴上的剩余空间分配到项之间 / 两端。单行多行都作用。 |
align-items |
交叉轴 | 容器（设所有项默认） | normal(≈ stretch) |
每个项在所在行的交叉轴对齐。stretch 需项在交叉轴无固定尺寸。 |
align-self |
交叉轴 | 单个 item | auto（随 align-items） |
覆盖容器的 align-items，只改这一个项。 |
align-content |
交叉轴 | 容器（行与行之间） | normal |
flex-wrap 非 nowrap 时分配行间空间，单行同样受它支配；nowrap 下无效。 |
gap / row-gap / column-gap |
两轴 | 项之间 | normal(= 0) |
项间固定间距，不参与剩余空间分配，叠加在对齐之上。 |
place-content / place-items |
— | 容器 | — | 简写：place-content = align-content + justify-content;place-items = align-items + justify-items（后者在 flex 无效，见下）。 |
这两个属性在 flex 里不生效（它们是 grid 的）。
· justify-items——设在容器上，flex 忽略它（flex 主轴的整体分布用 justify-content）。
· justify-self——设在 item 上，flex 忽略它。flex 里想把单个项沿主轴推到一侧 / 居中，用 margin: auto。
margin: auto 是 flex 主轴单项对齐的「补位」。 一个 flex item 设了 auto 方向的 margin，会吸收该方向的全部剩余空间。例如 margin-left: auto 把该项及其后的项推到主轴末端（常用于「最后一个按钮靠右」）;margin: auto
则让单个项在两轴居中。这也是 居中即截断一页中，用子项 margin: auto 替代 justify-content: center 来避免截断的原理。
溢出时的对齐细节另成一条线：center 一旦内容放不下会把首部推到滚不到的位置（居中即截断），可用 <overflow-position> 的
safe / unsafe 显式表达「别切到内容」。本页只覆盖对齐属性本身的作用范围。