model · 统一模型与术语

一套对齐属性，横跨所有布局模式

历史上对齐分散在各处：块级用 margin: auto / text-align / vertical-align,Flexbox 自带一套 justify-* / align-*。CSS Box Alignment 模块把这套对齐能力抽象成一组与布局模式无关的属性，再由 Flex / Grid / Block / Multicol 各自规定哪些生效、如何映射。本页先把这套统一模型与术语讲清——两组属性（分配剩余空间 vs 单项定位）、两条轴（justify-* 行内 / align-* 块）、五类取值关键字——后续各页再逐一落到具体布局模式。

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

1 · 两组属性 × 两条轴 = 六个属性

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

六个长属性 + 三个 `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-* 的轴映射不是所有模式都一致。 在统一模型里 justify-* = 行内轴、align-* = 块轴（Grid / Block / Multicol 都按此）。唯独 Flexbox 改按主轴 / 交叉轴:justify-content 管主轴、align-* 管交叉轴，且随 flex-direction 翻转。这条差异见在 Flexbox 中一页。

2 · 用 Grid 同时操纵六个属性

Grid 是唯一六个属性全部生效的布局模式，适合做统一模型的展台：单元（虚线框）比 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（<content/self-position>）	`center` `start` `end` `self-start` `self-end` `flex-start` `flex-end` `left` `right`	视类型分	把 subject 摆到容器某一侧 / 居中。各关键字的参照系不同（流向 / 物理 / flex 方向），见参照系一页。
baseline	`baseline` `first baseline` `last baseline`	`-items` / `-self`	让各 subject 的文字基线对齐，而非盒子边缘。
distributed（<content-distribution>）	`stretch` `space-between` `space-around` `space-evenly`	`*-content`	把剩余空间分摊到 subject 之间 / 周围；`stretch` 则拉伸 subject 自身填满。
overflow（<overflow-position>）	`safe` `unsafe`（前缀）	positional 前	修饰 positional 值：`safe center` = 「若居中会溢出截断就退回 `start`」。详见 flex 系列 · safe/unsafe。

4 · gap 也属于 Box Alignment

gap / row-gap / column-gap（统称 gutters）同样由本模块定义，作用于 Flex / Grid / Multicol：它只在 subject 之间开缝、不碰首尾，且不参与剩余空间分配（先扣掉 gap，再让 *-content 分配 free space）。一个历史差异：多列布局把 column-gap 初始值视为 1em，其余模式视为 0。

一图记住： justify = 行内轴 / align = 块轴；-content = 整组分配 / -items / -self = 单项定位；place-* = 两轴合一。剩下的全是「这个属性在这个布局模式里到底生不生效、轴怎么映射」——这正是后续各页的主题。