model · 统一模型与术语

统一对齐模型与术语

历史上对齐分散在各处：块级用 margin: auto、text-align、vertical-align，Flexbox 自带一套 justify-* 与 align-*。CSS Box Alignment 模块把这些能力抽象成一组与布局模式无关的属性，再由 Flex、Grid、Block、Multicol 各自规定哪些生效、轴如何映射。本页先讲清这套统一模型，后续各页再逐一落到具体布局模式。

定义 0.1（两个术语） alignment container（对齐容器）是提供对齐参照的盒子，如一个 grid 单元、一条 flex 行、一个 block 容器；alignment subject（对齐对象）是被对齐的盒子，如 item、列盒、文本。所有对齐属性做的都是同一件事：把若干 subject 在其 container 内沿某条轴摆放。

1 · 两组属性与两条轴

按「谁在动」分两组。content distribution（*-content）把容器内所有 subject 作为一个整体，分配多出来的空间；self alignment（*-items 与 *-self）把每个 subject 单独在它自己的格子里定位。按「哪条轴」分两列：justify-* 管行内轴，align-* 管块轴。

六个长属性与三个 `place-*` 简写（左右两列合一）。`place-content: center` 等价于 `align-content: center; justify-content: center`。
	行内轴 `justify-*`	块轴 `align-*`	简写
content distribution（容器到整组 subject）	`justify-content`	`align-content`	`place-content`
self alignment · 容器级（容器到每个 subject）	`justify-items`	`align-items`	`place-items`
self alignment · 单项（单个 subject 覆盖）	`justify-self`	`align-self`	`place-self`

警示 · 轴映射并非所有模式都一致。统一模型里 justify-* 恒等于行内轴、align-* 恒等于块轴，Grid、Block 与 Multicol 都按此。唯独 Flexbox 改按主轴与交叉轴：justify-content 管主轴、align-* 管交叉轴，且随 flex-direction 翻转。这条差异见在 Flexbox 中一页。

2 · Grid 作为统一模型的展台

Grid 是六个属性全部生效的布局模式，适合做统一模型的展台。其余模式各缺一部分：块容器只落了三个（见在 Block 中），Flex 缺 justify-self 与 justify-items，多列只有两个 *-content。

图 2-1 · 六个对齐属性各自的作用域。单元（虚线框）比 subject 大时 *-items 能把 subject 推到单元某角；轨道之和小于容器时 *-content 能分配剩余空间；焦点对象 A 另用 *-self 覆盖容器设置。

3 · 取值的五种类型

对齐属性的取值并非随意一组词，规范把它们归成五类数据类型。理解这层分类才能判断某个值能用在哪个属性上，例如 space-between 只属于 *-content，self-start 只属于 *-items 与 *-self。

当请求的 distributed 值无法实施（如只有一个 subject），会回退到对应的 fallback alignment，`space-between` 回退为 `start`。
类型	取值	用在	含义
`normal`	`normal`	全部	由各布局模式定义的默认行为。Grid 里多为 `stretch`，Flex 的 `justify-content` 里近似 `flex-start`。
positional	`center` `start` `end` `self-start` `self-end` `flex-start` `flex-end` `left` `right`	视类型分	把 subject 摆到容器某一侧或居中。各关键字的参照系不同，见参照系一页。
baseline	`baseline` `first baseline` `last baseline`	`-items` / `-self`	让各 subject 的文字基线对齐，而非盒子边缘。
distributed	`stretch` `space-between` `space-around` `space-evenly`	`*-content`	把剩余空间分摊到 subject 之间或周围；`stretch` 则拉伸 subject 自身填满。
overflow	`safe` `unsafe`（前缀）	positional 之前	修饰 positional 值。`safe center` 表示居中会溢出截断时退回 `start`，详见 flex 系列的 safe / unsafe。

4 · gutters 与 gap

gap、row-gap、column-gap（统称 gutters）同样由本模块定义，作用于 Flex、Grid 与 Multicol。它只在 subject 之间开缝、不碰首尾，且不参与剩余空间分配：先扣掉 gutter，再由 *-content 分配 free space。

图 4-1 · gutter 与剩余空间分配的先后关系。可调 gap 与 *-content，观察 gap 先被扣除、再由 *-content 分配所余空间。

注 · column-gap 的初始值是 normal 而非某个长度，这一点常被写成「多列的初始值是 1em、其余是 0」，不够准确。计算值在三种模式下都是 normal，差别在使用值：实测 Chrome 151 下，多列容器里 normal 的实际列缝随字号变化（font-size: 20px 量得 20px、32px 量得 32px，即 1em），而 Flex 与 Grid 里恒为 0（核对于 2026-08）。