CSS 盒子对齐模块第 3 级

1. 引言

CSS 第 1 级和第 2 级允许通过 text-align 对齐文本，并通过平衡 auto 外边距来对齐块级元素。 然而，除了表格单元格之外， 垂直对齐是不可能的。 随着 CSS 增加更多功能， 在各个维度上对齐盒子的能力变得更加重要。 本模块试图创建一个内聚且通用的盒子对齐模型，以便在所有 CSS 中共享。

注意：文本和行内级内容的对齐在 [CSS-TEXT-3] 和 [CSS-INLINE-3] 中定义。

注意：本规范无意更改 CSS2.1 中定义的任何行为， 当此处定义的属性设置为其初始值时。 如果实现者或任何其他人注意到差异， 请将其作为错误报告给 CSSWG。

（以上）本节不具有规范性。

1.1. 模块交互

本模块为 [CSS2] 第 9 章和第 10 章中描述的块布局模型添加了一些新的对齐功能，重新定义了如何解析过度约束的块级盒子外边距， 并定义了这些新的对齐属性 与使用 vertical-align 对齐表格单元格内容的交互， 如 [CSS2] 第 17 章所定义。

这些属性与 网格布局 [CSS-GRID-1] 和弹性盒子布局 [CSS-FLEXBOX-1] 的交互在其各自的模块中定义。 此处的属性定义取代了 [CSS-FLEXBOX-1] 中的定义（后者具有更小、更早的允许值子集）。

本模块中的任何属性均不适用于 ::first-line 或 ::first-letter 伪元素。

1.2. 值定义

本规范遵循 [CSS2] 中的 CSS 属性定义约定，使用 [CSS-VALUES-3] 中的值定义语法。 本规范中未定义的值类型在 CSS Values & Units [CSS-VALUES-3] 中定义。 与其他 CSS 模块的组合可能会扩展这些值类型的定义。

除了在其定义中列出的特定于属性的值之外， 本规范中定义的所有属性 也接受 CSS 范围关键字作为其属性值。 为便于阅读，未明确重复它们。

1.3. 部分实现

由于预计本模块中特性的支持 将分阶段部署，对应于受影响的各种布局模型， 因此在此澄清， 要求将任何不受支持的特性视为无效的部分实现规则 适用于任何对齐关键字， 如果该关键字未在其适用的所有布局模块中得到支持， 而实现通常支持该属性的布局模型。

例如， 如果一个实现支持 [CSS-GRID-1] 和 [CSS-FLEXBOX-1] 中的 align-self， 那么它必须将 start 视为无效， 除非它在网格和弹性容器中都得到支持。 但是，如果同一个实现根本不支持块级元素的 align-self， 那么未实现 align-self: start 并不会触发将其视为无效的要求。

2. 对齐属性概述

CSS 中的盒子对齐属性是一组 6 个属性， 用于控制盒子在其他盒子内的对齐方式。 它们可以沿两个轴进行描述：

• 它们适用的维度（主轴/行内轴 与 交叉轴/块轴），以及
• 它们是控制盒子在其父元素内的位置，还是控制盒子的内容在其自身内的位置。

注意：本规范使用术语“justify”和“align”来区分 主轴/行内轴和交叉轴/块轴方向上的对齐。 这种选择有些随意，但使用这两个术语可以形成 一个适用于所有 CSS 布局模型的一致命名方案 （包括 CSS Flexbox 1 § 2 Flex 布局盒子模型和术语）。

下表总结了盒子对齐属性以及它们可以应用的显示类型。

通用	轴	对齐对象	适用于
justify-content	主轴/行内轴	元素内的内容 （有效地调整内边距）	块容器、弹性容器和网格容器
align-content	交叉轴/块轴
justify-self	行内轴	元素在父元素内 （有效地调整外边距）	块级盒子、绝对定位盒子和网格项目
align-self	交叉轴/块轴		绝对定位盒子、弹性项目和网格项目
justify-items	行内轴	盒子内的项目 （控制子项目的 justify-self: auto）	块容器和网格容器
align-items	交叉轴/块轴		弹性容器和网格容器

注意：*-items 属性 不影响元素本身。 当在容器上设置时， 它们指定了容器元素子元素上任何 *-self: auto 的解释。

3. 对齐术语

由于本模块定义了 CSS 中所有布局模式的对齐属性， 因此引入了一些抽象术语：

对齐主体

对齐主体是指被属性对齐的一个或多个事物。 对于 justify-self 和 align-self， 对齐主体是设置了该属性的盒子的外边距盒子， 并采用该盒子的书写模式。 对于 justify-content 和 align-content， 对齐主体由布局模式定义 并指其内容的某些方面； 它也采用设置了该属性的盒子的书写模式。

对齐容器

对齐容器是对齐主体在其中对齐的矩形。 这由布局模式定义， 但通常是对齐主体的包含块， 并采用建立包含块的盒子的书写模式。

回退对齐

某些对齐方式只能在特定情况下实现 或者在它们可以消耗的空间方面受到限制； 例如，space-between 只能在有多个对齐主体时操作， 而基线对齐一旦实现，可能不足以吸收所有多余的空间。 在这些情况下，回退对齐会生效 （如下所定义） 以完全消耗多余的空间。

4. 对齐关键字

所有的对齐属性都使用一组通用的关键字值， 这些值在本节中定义。 关键字分为三类：

位置对齐

这些关键字将对齐定义为对齐容器内的绝对位置。

基线对齐

这些关键字将对齐定义为对齐上下文内多个对齐主体基线之间的关系。

分布式对齐

这些关键字将对齐定义为对齐主体之间的空间分布。

4.1. 位置对齐：center、start、end、self-start、self-end、flex-start、flex-end、left 和 right 关键字

位置对齐关键字指定对齐主体相对于其对齐容器的位置。

值的含义如下：

center (自身, 内容)

在其对齐容器内居中对齐主体。

start (自身, 内容)

将对齐主体与对齐容器在相应轴上的起始边缘对齐。

end (自身, 内容)

将对齐主体与对齐容器在相应轴上的结束边缘对齐。

self-start (自身)

将对齐主体与对齐容器中对应于对齐主体在相应轴上的起始侧的边缘对齐。

self-end (自身)

将对齐主体与对齐容器中对应于对齐主体在相应轴上的结束侧的边缘对齐。

flex-start (自身, 内容)

仅用于弹性布局。 [CSS-FLEXBOX-1] 将对齐主体与对齐容器中对应于弹性容器的主轴起始或交叉轴起始侧（视情况而定）的边缘对齐。

在弹性格式化上下文之外使用时，此值的行为类似于 start。 也就是说，对于非弹性项目（或假装是弹性项目， 例如在确定作为弹性容器子元素的绝对定位盒子的静态位置时）， 此值在自对齐属性中使用时行为类似于 start， 而对于非弹性容器的盒子， 此值在内容分布属性中使用时行为类似于 start。

flex-end (自身, 内容)

仅用于弹性布局。 将对齐主体与对齐容器中对应于弹性容器的主轴结束或交叉轴结束侧（视情况而定）的边缘对齐。

在弹性格式化上下文之外使用时，此值的行为类似于 end。 也就是说，对于非弹性项目（或假装是弹性项目， 例如在确定作为弹性容器子元素的绝对定位盒子的静态位置时）， 此值在自对齐属性中使用时行为类似于 end， 而对于非弹性容器的盒子， 此值在内容分布属性中使用时行为类似于 end。

left (仅 justify-*)

将对齐主体与对齐容器的行左或物理左边缘（以相应轴为准）对齐。

如果属性的轴与任一左↔右轴都不平行， 此值的行为类似于 start。目前，唯一属性的轴 与任一左↔右轴都不平行的情况 是在列式弹性盒中。

right (仅 justify-*)

将对齐主体与对齐容器的行右或物理右边缘（以相应轴为准）对齐。

如果属性的轴与任一左↔右轴都不平行， 此值的行为类似于 start。目前，唯一属性的轴 与任一左↔右轴都不平行的情况 是在列式弹性盒中。

使用两个语法术语来表示这些值的某些子集：

<self-position>

此集合由 justify-self 和 align-self 用于在其对齐容器内对齐盒子， 也由 justify-items 和 align-items（用于指定 justify-self 和 align-self 的默认值）使用。

<self-position> = center | start | end | self-start | self-end |
        flex-start | flex-end
    

<content-position>

此集合由 justify-content 和 align-content 用于在盒子自身内部对齐其内容。

<content-position> = center | start | end | flex-start | flex-end
    

注意：left 和 right 从 <self-position> 和 <content-position> 中排除， 尽管它们是 justify-content/justify-self/justify-items 的有效位置对齐值， 因为它们不允许在 align-* 属性中使用。 它们被明确包含在 justify-* 属性的语法中。

使其更容易理解“start”和“end”相对于正交流的双轴特性。

4.2. 基线对齐：baseline 关键字 和 first/last 修饰符

参见 CSS 书写模式 3 § 4.1 基线简介。

基线对齐是 一种位置对齐形式， 它通过匹配它们的对齐基线来对齐共享对齐上下文（例如一行中的单元格） 中的多个对齐主体。 如果基线共享组 内的对齐主体的位置 没有被基线对齐完全约束（即，它们可以在各自的 对齐容器内移动， 同时保持基线对齐）， 则它们会尽可能地进行回退对齐，同时保留它们的基线对齐。

基线对齐关键字由 <baseline-position> 语法项表示：

<baseline-position> = [ first | last ]? && baseline
    

first 和 last 值赋予盒子一个基线对齐偏好： 分别为“first”或“last”， 默认为“first”。

值具有以下含义：

baseline

计算为 first baseline，定义如下。

first baseline

指定参与第一基线对齐： 将盒子的第一基线集的对齐基线 与其基线共享组的相应基线对齐。 更多详细信息请参见 § 9.3 按基线对齐盒子。

first baseline 的回退对齐 是 safe self-start（对于自对齐） 或 safe start（对于内容分布）。

last baseline

指定参与最后基线对齐： 将盒子的最后基线集的对齐基线 与其基线共享组的相应基线对齐。 更多详细信息请参见 § 9.3 按基线对齐盒子。

last baseline 的回退对齐 是 safe self-end（对于自对齐） 或 safe end（对于内容分布）。

当为 align-content 指定时， 这些值会触发基线内容对齐， 在盒子的内容框内移动其内容， 并且也可能影响盒子本身的大小。 参见 § 5.4 基线内容对齐。

当为 align-self/justify-self 指定时， 这些值会触发基线自对齐， 在容器内移动整个盒子， 这可能会影响其容器的大小。 参见 § 6.4 基线自对齐。

当在盒子上指定基线 自对齐时，首先执行内容分布， 然后将生成的盒子及其内容进行自对齐。然而，如果盒子在同一轴向上也有基线内容对齐， 或者其在同一轴向上的内容分布属性为 normal， 则其在该轴向上使用的 内容分布属性 对于其基线自对齐的“first”或“last”的基线对齐偏好分别为 start 或 safe end。

在此处添加示例图片。

如果一个盒子不属于共享对齐上下文， 则使用回退 对齐。 例如，块级盒子上的 align-content: baseline 会回退到 start 对齐。 回退对齐也用于在其对齐容器内对齐基线共享组。

注意：因为它们是等效的，并且 baseline 更短， 所以 CSSOM 将 first baseline 序列化为 baseline。 参见 CSSOM § 6.7.2 序列化 CSS 值。

注意：对于有些相关的 vertical-align 属性， 由于 CSS2.1 中不一致的设计决策，baseline 并不 等同于 first baseline，因为行内级盒子的基线对齐偏好取决于 display。 （例如，inline-block 默认使用其最后基线， 而 inline-table 默认使用其第一基线。）

4.3. 分布式对齐：stretch、space-between、space-around 和 space-evenly 关键字

分布式 对齐值由 justify-content 和 align-content 用于在其对齐主体之间分散容器的额外空间。

当无法以这种方式分布空间时， 这些值的行为与其回退对齐相同。 每个分布值都有一个关联的默认回退 对齐。 （此模块的未来级别可能允许显式指定回退 对齐。）

space-between

对齐 主体在对齐容器中均匀分布。 第一个对齐主体与对齐容器的起始边缘齐平放置， 最后一个对齐主体与对齐容器的结束边缘齐平放置， 其余的对齐主体则被分布，使得任意两个相邻对齐 主体之间的间距相同。

此值的默认回退对齐是 safe flex-start。（对于除弹性布局之外的布局模式，flex-start 与 start 相同。）

space-around

对齐 主体在对齐容器中均匀分布， 两端各留有半个大小的空间。 对齐主体被分布，使得任意两个相邻对齐 主体之间的间距相同， 并且第一个对齐 主体之前和最后一个对齐主体之后的间距是其他间距的一半。

此值的默认回退对齐是 safe center。

space-evenly

对齐 主体在对齐容器中均匀分布， 两端各留有一个完整大小的空间。 对齐主体被分布，使得任意两个相邻对齐 主体之间、 第一个对齐主体之前、 以及最后一个对齐主体之后的间距相同。

此值的默认回退对齐是 safe center。

stretch

如果对齐主体的组合大小小于对齐 容器的大小， 任何auto大小的对齐主体 的大小会均等增加（非按比例）， 同时仍然遵守max-height/max-width（或等效功能）施加的约束， 以便组合大小恰好填满对齐 容器。

此值的默认回退对齐是 flex-start。（对于除弹性布局之外的布局模式，flex-start 与 start 相同。）

注意：此 `align-content/stretch` 定义 适用于内容分布属性； 自对齐属性 justify-self/align-self 有其自己的 stretch 值， 它可以增大或缩小对齐主体以确保其恰好适合对齐 容器。

这些值由 <content-distribution> 语法项表示：

<content-distribution> = space-between | space-around | space-evenly | stretch
    

4.4. 溢出对齐：safe 和 unsafe 关键字以及滚动安全限制

在某些情况下， 如果严格按指定方式对齐， 对齐对象可能会溢出其对齐容器， 并可能造成内容丢失。 例如，如果侧边栏内容被无条件居中， 容易溢出的项目可能会延伸到视口起始边缘之外， 而这部分无法滚动到视野内。

为控制该情况， 可以显式指定溢出对齐模式。 “不安全”对齐在溢出的情况下会遵循指定的对齐模式，即使会导致数据显示不全； “安全”对齐则在溢出时调整对齐规则，试图避免数据丢失。 默认行为是保证对齐对象在可滚动区域内部， 但截至目前，相关安全机制尚未实现。

<overflow-position> = unsafe | safe

safe

如果对齐对象的尺寸溢出对齐容器， 则对齐对象会按flex-start对齐处理。

unsafe

无论对齐对象和对齐容器的相对尺寸如何， 指定的对齐值会被严格遵循。

（未指定值）

如果没有显式指定溢出对齐， 默认的溢出对齐是“安全”与“不安全”的混合模式。 详见 § 4.4.1 自动溢出对齐安全性。

4.4.1. 自动溢出对齐安全性

如果未为属性指定溢出对齐模式，则默认行为介于安全 (safe)和不安全 (unsafe)之间，并且因布局模式而异。

4.4.1.1. 滚动容器的内容分布

滚动容器上内容分布的默认溢出对齐行为是不安全 (unsafe)。 内容分布属性的非normal值会改变可滚动溢出区域，以便允许访问溢出内容。请参见§ 5.3 对齐溢出和滚动容器。

4.4.1.2. 绝对定位盒子的自对齐

对于 绝对定位的 对齐对象， 如果其相关的 已用 自对齐属性不为 normal， 默认的 溢出对齐 行为如下：

（对于未满足上述条件的 绝对定位 对齐对象， 参见 § 4.4.1.3 其他所有对齐方式。）

注意：这些规则会约束盒子的位置，以尽量减少溢出， 同时在可能范围内遵循指定的对齐方式， 并保证当盒子尺寸变化时，行为保持连续性。

4.4.1.3. 所有其他对齐

对于所有其他元素：

对所有其他元素：

1. 如果对齐对象溢出其对齐容器， 则按照指定方式对齐（不安全）。

2. 如果对齐对象会溢出其最近的祖先滚动容器的可滚动溢出区域， （即延伸到“不可滚动”区域）， 则在该方向上的溢出会被限制， 并将剩余溢出偏向相反的一侧。

“智能”默认行为的实现可能与 Web 兼容性不符 （尽管我们希望并相信会兼容）， 所以用户代理应该将对此的反馈传递给工作组。 尚未实现“智能”默认行为的用户代理， 必须在align-content 属性用于块容器时采用安全模式， 其它情况则采用不安全模式。

5. 内容分布：在盒子内部对齐其内容

内容分布 控制盒子内容在其内容框内的对齐。 它由内容分布属性 align-content 和 justify-content（及其 place-content 简写）指定。

5.1. justify-content 和 align-content 属性

将盒子作为一个整体的内容（作为对齐主体）在盒子自身内部（作为对齐容器）进行对齐： 沿盒子的内联/行/主轴（对于 justify-content） 或盒子的块/列/交叉轴（对于 align-content）。 除 normal 之外的值在上面的 § 4 对齐关键字中定义。

对于所有布局模式，对齐主体和对齐容器都采用设置了 *-content 属性的盒子的书写模式。

5.1.1. 块容器（包括表格单元格）

5.1.2. 多列容器

5.1.3. 弹性容器

有关详细信息，请参见 [CSS-FLEXBOX-1]。

5.1.4. 网格容器

有关详细信息，请参见 [CSS-GRID-1]。

5.2. 内容分布简写：place-content 属性

此简写属性在一个声明中同时设置 align-content 和 justify-content 属性。 第一个值赋给 align-content。 第二个值赋给 justify-content； 如果省略，则从第一个值复制， 除非该值是 <baseline-position>，在这种情况下，它默认为 start。

5.3. 对齐溢出和滚动容器

当内容分布属性用于有溢出的滚动容器， 且存在溢出的对齐对象时， 会减少不可达可滚动溢出区域的裁剪， 以确保对齐对象能够被滚动到其start对齐的位置。

注意： 对齐对象不一定等同于可滚动溢出区域： 溢出对齐对象的内容（如脱流盒），会增加可滚动溢出区域，但不会增加对齐对象。 因此，end对齐的滚动容器 可能初始并没有滚动到底部， 且被定位的内容仍然可能被裁剪， 如果它比形成对齐对象的流内内容更远进入不可达可滚动溢出区域。

注意： 滚动条的存在可能会改变滚动容器的内容盒尺寸——因此也会改变对齐容器 和/或对齐对象的尺寸。

5.4. 基线内容对齐

参与行式布局上下文（共享对齐上下文）的盒子的内容可以相互进行基线对齐。 基线内容对齐有效地增加了盒子上的 内边距，以使其内容的对齐基线 与其基线共享组中其他基线对齐盒子的基线对齐。

基线内容对齐仅在 align-content 轴 与盒子的块轴平行时才适用 （即，它不适用于“列”弹性容器）； 否则使用回退对齐。

参与基线内容对齐的盒子集合取决于布局模型：

表格单元格：

一个（非替换的）表格单元格在其最开始/最末尾的行中参与 第一/最后基线内容对齐，前提是其内联轴与表格本身的内联轴平行，并且 其计算的 align-content 为 first baseline（last baseline）。

注意： 不支持共享同一列的单元格的基线内容对齐； 但是，如果有足够的需求和实现者兴趣，将来可能会在某个级别中添加此功能。

弹性项目：

一个非替换的弹性项目 在其弹性行中参与 第一/最后基线内容对齐，前提是 其计算的 align-content 为 first baseline/last baseline，并且其内联轴与主轴平行。

网格项目：

一个非替换的网格项目 在其最开始/最末尾的行或列（以与其内联轴平行的为准）中参与 第一/最后基线内容对齐， 并且其计算的 align-content 为 first baseline/last baseline。

此外， 为了参与基线内容对齐，它还必须具有协调的自对齐偏好， 以保证盒子将其相关边缘与其基线共享组中的其他盒子对齐。 也就是说，当盒子的基线对齐偏好为“first”（“last”）时，其start（end）外边距边缘必须意图——并且实际——与其包含块的相应边缘对齐。 否则，它将采用其回退对齐。

有关其他详细信息，请参见 § 9.3 按基线对齐盒子。 基线内容对齐可以增加盒子的固有大小。

6. 自对齐：在父元素内对齐盒子

自对齐控制盒子在其包含块内的对齐方式。 它由自对齐属性 align-self 和 justify-self（以及它们的place-self 简写）指定。

6.1. 行内轴（或主轴）自对齐：justify-self 属性

将盒子（作为 对齐对象） 沿其包含块（作为 对齐容器） 的内联/行/主轴方向在 对齐容器内对齐： 盒子的外边缘在其 对齐容器 内 按其对齐值的描述进行对齐。 各取值含义如下：

auto

如果盒子没有父元素，或在确定绝对定位盒子的实际位置时， 其行为等同于 normal。 否则（包括在确定绝对定位盒子的 静态 位置时）， 其行为等同于父盒的计算 justify-items 值 （不含任何 legacy 关键字）。

normal

表示该布局模式的“默认”对齐。 其行为取决于布局模式，如下所述。

<self-position> | left | right

按指定方式移动盒子的位置， 见 § 4 对齐关键字。

<overflow-position>

控制盒子溢出时的对齐方式， 见 § 4.4 溢出对齐：safe 与 unsafe 关键字及滚动安全限制。

stretch

当盒子的 计算 width/height （按轴的适用性） 为 auto， 且相应轴上的任一 margin 均非 auto 时， 将盒子的已用尺寸设为使其外部尺寸尽可能填满 对齐容器 所需的长度， 同时仍遵循 min-height/min-width/max-height/max-width 所施加的约束。

除非另有规定，此值一般回退为 flex-start， 若盒子在同一轴上还指定了 first baseline 或 last baseline 的 baseline content-alignment（分别对应）， 则回退为 self-start 或 self-end。

注意： stretch 关键字可能会使元素收缩以适应其容器。

<baseline-position>

表示 基线自身对齐， 见 § 4.2 基线对齐：baseline 关键字与 first/last 修饰符、 § 6.4 基线自身对齐， 以及 § 9 基线对齐细则。

除 stretch 外， 当 width/height 为 auto 时， 将按 fit-content 处理。

注意： 由于 auto 外边距会实质性地调整外边距区域的大小， 因此其优先级高于 justify-self。

6.1.1. 块级盒子

6.1.2. 绝对定位盒子

本节描述 justify-self 对绝对定位盒子外边距盒相对于其（绝对定位）包含块定位方式的影响。

6.1.3. 表格单元格

此属性不适用于表格单元格， 因为它们的位置和大小完全受表格布局的约束。

6.1.4. 弹性项目

此属性不适用于弹性项目， 因为在主轴上有多个项目。 有关拉伸，请参见 flex；有关主轴对齐，请参见 justify-content。 [CSS-FLEXBOX-1]

6.1.5. 网格项目

有关详细信息，请参见 [CSS-GRID-1]。

6.2. 块轴（或交叉轴）自对齐：align-self 属性

将盒子（作为 对齐对象） 沿其包含块（作为 对齐容器） 的块轴／列轴／交叉轴在 对齐容器内对齐： 盒子的外边缘将在其 对齐容器 内 依据其对齐值描述排列。 各取值含义如下：

auto

如果盒子没有父元素，或在确定绝对定位盒子的实际位置时，表现为 normal。 其它情况下（包括确定绝对定位盒子的静态位置时），表现为父元素的计算 align-items 值 （不含任何 legacy 关键字）。

normal

表示该布局模式的“默认”对齐，具体见下文。

<self-position>

按指定方式调整盒子的位置，详见§ 4 对齐关键字。

<overflow-position>

控制盒子溢出时的对齐方式，详见§ 4.4 溢出对齐：safe 与 unsafe 关键字及滚动安全限制。

stretch

其定义同justify-self，详见§ 6.1 内联轴（或主轴）自身对齐：justify-self 属性。

<baseline-position>

表示基线自身对齐， 具体见§ 4.2 基线对齐：baseline 关键字与 first/last 修饰符、 § 6.4 基线自身对齐， 以及§ 9 基线对齐细则。

注意： auto 外边距会实质性地调整外边距区域的大小， 因此其优先级高于 align-self。

6.2.1. 块级盒子

align-self 属性不适用于块级盒子 （包括浮动元素）， 因为在块轴上有多个项目。

6.2.2. 绝对定位盒子

本节描述 align-self 对绝对定位盒子的外边距盒 相对于其（绝对定位）包含块的定位方式的影响。

6.2.3. 表格单元格

此属性不适用于表格单元格， 因为它们的位置和大小完全受表格布局的约束。

6.2.4. 弹性项目

有关详细信息，请参见 [CSS-FLEXBOX-1]。

6.2.5. 网格项目

有关详细信息，请参见 [CSS-GRID-1]。

6.3. 自对齐简写：place-self 属性

此简写属性用于同时设置 align-self 和 justify-self 属性， 可在一条声明中同时指定。 第一个值分配给 align-self。 第二个值分配给 justify-self； 如未填写，则从第一个值复制。

6.4. 基线自对齐

参与行式布局上下文（共享对齐上下文）的盒子 可以相互进行基线对齐。基线自对齐有效地增加了盒子的 外边距，以使其对齐基线 与其基线共享组中的其他基线对齐盒子的基线对齐。

参与基线自对齐的盒子集合取决于布局模型：

弹性项目：

如果弹性项目的计算 align-self 为 first baseline/last baseline，则它参与其弹性行中的 第一/最后基线自对齐。 有关详细信息，请参见 [CSS-FLEXBOX-1]。

网格项目：

如果网格项目的 align-self 或 justify-self 属性（分别） 计算为 first baseline/last baseline，则它参与其最开始/最末尾行或列中的 第一/最后基线自对齐。

有关确切详细信息，请参见 § 9.3 按基线对齐盒子。基线自对齐可以增加盒子的固有尺寸贡献。

6.5. 对具有静态位置内边距的绝对定位盒子的大小调整的影响

对于行内轴偏移量均为 auto 的绝对定位盒子， 用于计算行内尺寸的可用空间也受对齐的影响。

注意： 在 [CSS2] 中，可用空间取决于静态位置包含块的 direction 属性。 （参见 CSS2§10.3.7 和 CSS2§10.3.8。） 从根本上说，这些规则将其中一个 auto 内边距 （默认为起始边缘内边距） 设置为静态位置矩形的相应边缘，另一个设置为包含块的相应边缘（即，将内边距设置为零）。 正如自对齐属性替换了包含块的direction 查找以进行放置一样， 它们也替换了此查找以进行大小调整， 如此处指定。

因此， 在解读 CSS2§10.3.7 和 CSS2§10.3.8 里的规则时， 只要引用到static-position containing block的 direction 属性， 都要改为引用align-self或justify-self属性的值 （以规定适用当前轴的属性为准）， 其中 left-等价对齐按ltr定义， right-等价对齐按rtl定义。 把normal等同于start， 任何分布式对齐值都视为其回退对齐。

对于center对齐， 盒子的可用空间 是 静态位置矩形 中心到 包含块 最近边缘之间距离的两倍（在相关轴上）。

注意： align-self/justify-self 属性 还可以修改大小调整的其他方面： 例如，justify-self: stretch 将替换 到可用空间中的“收缩以适应”（fit-content）大小调整为拉伸以适应大小调整（消耗所有可用空间）。 这与此处的可用空间调整是独立的效果。

注意： 这仅影响如何计算可用空间 以调整绝对定位盒子的大小； 其对齐方式如前几节所述。

7. 默认对齐

align-items 和 justify-items 属性 （及其 place-items 简写） 设置元素子盒子的默认 align-self 和 justify-self 行为。

7.1. 行内轴（或主轴）默认对齐：justify-items 属性

此属性为参与此盒子格式化上下文的所有子盒子（包括匿名盒子）指定默认的 justify-self。 值具有以下含义：

legacy

此关键字使值有效地继承到后代。

如果 legacy 关键字单独出现 （没有附带的 left、right 或 center 关键字）： 如果 justify-items 的继承值 包含 legacy 关键字， 则此值计算为继承值； 否则计算为 normal。

当 justify-self:auto 引用 justify-items 的值时， 它仅引用对齐关键字，而不引用 legacy 关键字。 它的存在是为了实现 HTML 的 <center> 元素和 align 属性的旧版对齐行为。

其他值没有特殊处理，仅由 justify-self 引用。

7.2. 块轴（或交叉轴）默认对齐：align-items 属性

此属性为参与此盒子格式化上下文的所有子盒子（包括匿名盒子）指定默认的 align-self。

值没有特殊处理，仅由 align-self 引用。

7.3. 默认对齐简写：place-items 属性

此简写属性在单个声明中同时设置 align-items 和 justify-items 属性。 第一个值赋给 align-items。 第二个值赋给 justify-items； 如果省略，则从第一个值复制。

8. 盒子之间的间隙

虽然 margin 和 padding 可以用来指定单个盒子周围的视觉间距， 但在给定的布局上下文中，全局指定相邻盒子之间的间距有时更方便， 特别是当同级盒子之间的间距与第一个/最后一个盒子和容器边缘之间的间距不同时。

gap 属性及其 row-gap 和 column-gap 子属性， 为多列、弹性（flex） 和网格（grid）布局提供了此功能。

8.1. 行和列间距：row-gap 和 column-gap 属性

这些属性指定容器中项目之间的固定长度间距， 在它们之间添加空间——方式类似于内容分布属性的 space-between 关键字， 但大小是固定的，而不是剩余空间的一部分。 column-gap 属性指定“列”之间的间距， 在容器的行内轴中分隔框， 类似于行内轴外边距； 而 row-gap 表示“行”之间的间距， 在容器的块轴中分隔框。

值具有以下含义：

<length-percentage [0,∞]>

指定“行”或“列”之间的间隙，由其应用的布局模式定义； 详见下面的小节。

负值无效。 对于百分比， 参见 § 8.3 gap 属性中的百分比。

normal

normal 表示 在多列容器上使用值为 1em， 在所有其他上下文中表示使用值为 0px。

间距影响项目之间的最小间距： 可以通过 justify-content/align-content 添加额外的间距。 这种额外的空间有效地增加了这些间距的大小。

这些属性的确切处理方式因布局容器而异：

多列容器

column-gap 指定相邻列框之间的间距， 参见 [CSS-MULTICOL-1]。 row-gap 指定由 column-height 建立的列框行之间的间距， 参见 [CSS-MULTICOL-2]。

弹性容器

应用于主轴时 （如在 row column-gap 的 弹性容器中）， 表示项目间的间隙 （相当于在单行相邻弹性项之间插入一个额外的固定尺寸外边距）。

应用于 the 交叉轴 (e.g. row-gap in a row 弹性容器), 表示 the 间隙 between 相邻 弹性行.

网格容器

在row-gap和 column-gap属性 作用于网格容器时， 分别定义间隙在 网格行和 网格列之间。 具体细节见 CSS Grid Layout 1 § 10.1 间隙： row-gap、column-gap 和 gap 属性。

所有情况下，当间隙与 分页断点重合时，该间隙会消失。 [CSS-BREAK-3]

注意： 表格盒不会通过 gap 属性 设置单元格间距， 而是使用 border-spacing 属性， 其功能有所不同： 属性可继承， 并且还用于设置最外层单元格与表格边框之间的额外间距 （类似于 space-evenly ，而不是 space-between）。

8.2. Gap 简写：gap 属性

此属性是一个简写，用于在一个声明中设置 row-gap 和 column-gap。 如果省略 <'column-gap'>， 则将其设置为与 <'row-gap'> 相同的值。

注意： gap 属性只是盒子之间创建的可见“间距”或“通道”的一个组成部分。 外边距、内边距或使用分布式对齐可能会增加盒子之间的可见分隔， 超出 gap 中指定的值。

8.3. gap 属性中的百分比

通常， 由 gap 属性引入的间隙 旨在表现得像一个具有间隙大小的空项目/轨道等； 换句话说， 作者应该能够通过仅在容器中插入额外的空项目/轨道等来重现 gap 的效果。

gap 总是根据元素的内容框的相应大小解析百分比。 当此大小确定时， 行为是明确定义的 并且在不同布局模式中是一致的。 但是由于不同的布局模式对项目/轨道等的循环百分比大小处理方式不同，gap 也是如此：

在网格布局中

如同最小尺寸属性和外边距/内边距 [CSS-SIZING-3]，循环百分比大小在确定固有尺寸贡献时解析为零， 但在布局盒子内容时解析为盒子的内容框。

在弹性布局中

循环百分比大小在所有情况下都解析为零。

8.4. 旧版 Gap 属性：grid-row-gap、grid-column-gap 和 grid-gap 属性

网格布局模块最初是用它自己的一套间距属性编写的， 之后所有这些属性才统一到现有的 row-gap/column-gap 命名中。 为了与旧内容兼容， 必须按如下方式支持这些以 grid- 为前缀的名称：

• grid-row-gap 作为 row-gap 属性的旧名称别名

• grid-column-gap 作为 column-gap 属性的旧名称别名

• grid-gap 作为 gap 属性的旧名称别名

9. 基线对齐详情

基线共享组中的盒子使用其对齐基线相互对齐。 例如，在水平书写模式中， 对同一行中的表格单元格指定 align-content: baseline 将对齐其第一个格式化行的基线。 本节详细定义了在考虑到国际化现代 CSS 中存在的众多基线和书写模式的情况下， 如何执行基线对齐。

基线集是 与公共基线表关联的一组基线（字母基线、中心基线等）。 通常，排版传统只会使用其中一种， 但不同的书写系统使用不同的基线， 混合书写系统可能会导致在单行内使用多种基线。 有关基线和书写模式的更多信息，请参阅 CSS 书写模式 3 § 4.1 基线简介。

9.1. 确定盒子的基线

对于给定轴，每个盒子 都可能有一个 第一基线集（和 最后基线集）， 名义上对应于 盒子内文本第一行/最后一行的基线集。 对齐基线， 即用于在其对齐上下文中对齐盒子的基线， 是其基线集中的基线之一， 通常是与共享对齐上下文关联的主导基线。 （请参阅 [CSS-INLINE-3] 中的 dominant-baseline 和 alignment-baseline 属性。）

盒子的第一和最后基线集 根据布局模型的不同而确定，如下所示：

行盒（line box）

行盒的第一个/最后一个 基线集 是根据主基线和其 根内联盒 的字体设置 生成 的。

块容器

块容器的第一个/最后一个 基线集 取自块容器中第一个/最后一个在流内 行盒， 或第一个/最后一个在块容器内做出第一个/最后一个基线贡献的 块级流内子元素， 以先/后出现者为准。 若没有这样的行盒或子元素， 则该块容器没有 基线集。

不过，为了兼容历史， 如果其 baseline-source 是 auto（即 初始值） 一个块级或内联级 块容器 且是滚动容器的， 始终有一个最后基线集， 其所有基线都对应其 块末端 外边距边缘。

多列容器

多列容器的第一个 基线集 是具有最高（块起始方向最多）基线的第一个 基线集， 该基线来自 列 或 跨列元素， 并对应于 多列容器的 对齐基线。 若没有这样的行盒或子元素， 多列容器没有第一个 基线集。

最后 基线集与此类似， 但使用 最后 基线集 和 最低（块末端方向最多）基线。

表格

表格盒的第一个/最后一个 基线集 就是其第一个/最后一个行的第一个/最后一个 基线集。

在查找 inline-block 的第一个/最后一个基线集时， 要跳过由表格盒贡献的所有基线。 （此怪癖是从 [CSS2] 沿袭下来的历史行为。）

表格行

如果该行的任何单元格在 first baseline/last baseline 对齐中， 沿 内联轴参与， 那么该行的第一个/最后一个 基线集 就是根据这些单元格共享的 对齐基线 以及该行的 首选字体对齐后 生成 的。 否则，该行的第一个/最后一个 基线集会根据该行所有单元格的内容区最下和最高边 合成。 [CSS2]

跨行单元格在基线对齐时，只参与其跨的第一个/最后一个行。

弹性容器

参考 Flex Baselines，出处 [CSS-FLEXBOX-1]。

网格容器

参考 Grid Baselines，出处 [CSS-GRID-1]。

要从单个基线为盒子生成基线， 请使用该盒子的字体设置和第一个可用字体中的基线表， 并将该基线集与给定的单个基线对齐。

如果参与基线对齐的盒子没有基线集， 则其对齐基线将根据其参与的格式化上下文的规则进行合成。 要从矩形（或两条平行线）合成基线， 请从下划线合成字母基线， 并通过平均两个边缘或线的位置来合成中心基线。 有关合成其他基线的规则，请参阅 CSS 内联布局 3 § A 合成对齐度量。

注意： 用于从盒子合成基线的边缘 取决于其格式化上下文： 内联级盒子从其外边距边缘合成 [CSS-INLINE-3]， 表格单元格从其内容边缘合成 [CSS2]， 网格和弹性项目从其边框边缘合成 [CSS-GRID-1] [CSS-FLEXBOX-1]。

通常，被对齐的盒子、形状或其他对象的书写模式 用于确定用于合成的下划线和 上划线边缘。 但是，当该书写模式的块流向平行于对齐上下文的轴时， 必须假定一个轴兼容的书写模式：

• 如果建立对齐上下文的盒子具有与对齐上下文轴正交的块流向， 则使用其书写模式。

• 否则：

  • 如果盒子自身的书写模式是垂直的， 则假定为 horizontal-tb。

  • 如果盒子自身的书写模式是水平的， 则如果 direction 为 ltr，则假定为 vertical-lr；如果 direction 为 rtl，则假定为 vertical-rl。

在查找盒子的基线时， 该盒子及其所有带滚动机制的流内后代（参见 overflow 属性） 必须视为已滚动到初始滚动位置的状态。 此外， 如果滚动容器的第一个/最后一个基线 位置在其边框之外， 则该基线的位置会被钳制到边框边缘。

9.2. 基线对齐分组

基线共享组 由共同参与基线对齐的盒子组成。 这仅在它们同时满足以下条件时才可能：

• 沿垂直于其进行基线对齐的轴共享一个对齐上下文。 （例如，具有 align-self: baseline 的网格项目沿网格的块轴进行基线对齐， 因此与其行中的其他项目一起参与。）
• 具有兼容的基线对齐首选项 （即，想要对齐的基线位于对齐上下文的同一侧）。

注意： 参与基线内容对齐的盒子和 参与基线自对齐的盒子可以是同一基线共享组的一部分， 因此可以相互对齐。 两种方法之间的区别在于为执行对齐而插入额外空间的位置 （在盒子自身边框的内部或外部）。

当盒子满足以下条件时，它们沿特定轴共享由特定盒子建立的对齐上下文：

• 同一行中的表格单元格，沿表格的行（内联）轴，由行盒建立
• 同一行中的网格项目，沿网格的行（内联）轴，由网格容器建立
• 同一列中的网格项目，沿网格的列（块）轴，由网格容器建立
• 同一弹性行中的弹性项目，沿弹性容器的主轴，由弹性容器建立

注意： 从概念上讲， 行盒中的内联级盒子也共享一个自对齐上下文并参与基线共享组； 但是它们仅响应 vertical-align 属性进行基线对齐， 而不响应本模块中定义的任何属性。 请参阅 [CSS-INLINE-3]。

如果一个盒子跨越多个共享对齐上下文， 则它沿该轴在其最开始/最末端的共享对齐上下文中参与第一/最后基线对齐。 例如，一个跨越三行的表格单元格 与其跨越的第一行中的表格单元格进行第一基线对齐， 或者与其跨越的最后一行中的表格单元格进行最后基线对齐。

如果基线共享组中的两个盒子的基线对齐首选项具有以下特征， 则它们是兼容的：

• 相同的块流向和相同的基线对齐首选项

• 相反的块流向和相反的基线对齐首选项

9.3. 按基线对齐盒子

对于一组属于同一基线共享组的对齐对象及其基线， 基线对齐过程如下：

1. 使用该组对齐上下文的首选字体生成基线共享组的基线表， 并同时叠加该基线表的镜像（按中心基线对齐）。 这些就是对齐对象对齐的基线“网格”。

2. 将每个对齐对象按其指定的对齐基线， 对齐到组的基线表或其镜像，以和该文本行方向匹配为准。 除非另有指定（如通过 alignment-baseline 属性）， 否则 对齐基线为对齐上下文的主基线。

3. 将已对齐的基线共享组根据其回退对齐定位到对齐容器内。 基线共享组的回退对齐， 以其各成员项的回退对齐通过物理方向解析得出。

4. 对于第一个/最后一个基线内容对齐， 需在对齐容器的起始/末端内容边 和对齐对象边缘之间 最小化地添加额外空间， 以使同一对齐上下文内所有 对齐容器的起始/末端外边距边缘对齐， 同时所有成员在该基线共享组内仍保持基线对齐。

附录 A：静态位置术语

当绝对定位盒子某一轴上的两个inset 属性都为 auto 时， CSS2 会使用其静态位置 来确定其尺寸和位置。 详见 CSS2.1§10.3.7。 盒子对齐属性 会修改这些计算， 就像它们会影响其他布局模式下的尺寸和定位计算一样。 这些修改涉及一个 静态位置矩形， 其各边表示该盒子相对于其包含块的静态位置。

静态位置矩形及其对应的静态位置 由其“假设盒子”的布局模型定义：

块布局

块级盒子的静态位置在 [CSS2] 第 10 章中定义。 静态位置矩形是一个零厚度矩形，跨越盒子静态位置包含块的行内轴两侧（参见 CSS2§10.3.7）； 并位于其块起始静态位置（参见 CSS2§10.6.4）。

行内布局

行内级盒子的静态位置在 [CSS2] 第 10 章中定义。 静态位置矩形是一个零厚度矩形，跨越本应包含其“假设盒子”的行盒的上边线/下边线两侧 （参见 CSS2§10.3.7）； 并位于其行内起始静态位置。

弹性布局

弹性容器子元素的静态位置矩形对应于弹性容器的内容边缘。 参见 CSS 弹性盒模型 1 § 4.1 绝对定位的弹性子元素。

网格布局

默认情况下，网格容器子元素的静态位置矩形对应于网格容器的内容边缘。 但是，如果该网格容器同时也是盒子的实际包含块， 则由网格放置属性指定的网格区域将改为建立其静态位置矩形。 参见 [CSS-GRID-1] 中的网格容器子元素的静态位置。

10. 变更

自 2025年3月11日工作草案 起的更改包括：

• 明确§ 4.4.1.2 绝对定位盒的自身对齐在 position-area 改变 已用值 且 normal 时适用。

• 允许绝对定位盒子即使溢出到滚动容器包含块的可滚动溢出区域时，仍然遵循对齐。 (问题12106)

• 允许在 normal 时指定 safe/unsafe。 (问题12920)

• 更改 safe 对齐，使容器回退到 flex-start， 以确保对于可滚动反向弹性盒是安全的。 (问题11937)

• 定义匿名块盒始终表现为 justify-self: normal。 (问题11461)

• 定义 justify-self 影响块级盒子的 自动尺寸 的方式与其对弹性（flex）及网格项一致。 (问题12102)

另见之前的更改。

11. 隐私注意事项

作为一个简单的布局规范， 这没有引入新的隐私注意事项。

12. 安全注意事项

作为一个简单的布局规范， 这没有引入新的安全注意事项。

致谢

特别感谢 David Baron、Javier Fernandez、Markus Mielke、Alex Mogilevsky 以及 CSSWG 2008 年 3 月 F2F 对齐讨论的参与者 对本文所述对齐模型的贡献， 以及 Melanie Richards 对各种对齐关键字的插图。