CSS 盒子对齐模块第三级

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

如果对齐主体的大小溢出对齐容器， 则对齐主体将改为像对齐模式为 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. 如果对齐主体溢出其对齐容器，则按指定对齐（不安全 (unsafe)）。

2. 如果对齐主体将溢出其最近祖先滚动容器的可滚动溢出区域（从而延伸到“不可滚动”区域），则其在该方向上的溢出将通过将任何剩余溢出偏向另一侧来限制。

实现“智能”默认行为可能不具有 Web 兼容性（尽管我们希望如此，并认为很有可能），因此 UA 应将关于此点的任何反馈传递给 WG。尚未实现“智能”默认行为的 UA 必须在块容器上的 align-content 表现为安全 (safe)，否则表现为不安全 (unsafe)。

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

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

stretch

当盒子的计算 width/height （视轴而定） 为 auto 且其任一边距（在相应轴上）均不为 auto 时， 将盒子的使用尺寸设置为必要的长度，使其外尺寸 尽可能接近填充对齐容器， 同时仍遵守 min-height/min-width/max-height/max-width 施加的约束。

除非另有规定，否则此值通常回退到 flex-start， 如果盒子还在同一轴上指定了 第一基线 或 最后基线 基线内容对齐 （分别），则回退到 self-start 或 self-end。

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

<baseline-position>

表示基线自对齐， 定义见 § 4.2 基线对齐：baseline 关键字和 first/last 修饰符、§ 6.4 基线自对齐 和 § 9 基线对齐详情。

<overflow-position>? <self-position>

定义见上文 § 4 对齐关键字。

除 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

表示布局模式的“默认”对齐方式， 如下定义。

stretch

与 justify-self 在 § 6.1 行内轴（或主轴）自对齐：justify-self 属性中的定义相同。

<baseline-position>

表示基线自对齐， 定义见 § 4.2 基线对齐：baseline 关键字和 first/last 修饰符、§ 6.4 基线自对齐 和 § 9 基线对齐详情。

<overflow-position>? <self-position>

定义见上文 § 4 对齐关键字。

注意： 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 中的规则时， 无论何时引用静态位置包含块的 direction 属性， 都应改为引用 align-self 或 justify-self 属性的值 （以定义为适用于相关轴的为准）， 将左等效对齐视为 ltr 定义的对齐，将右等效对齐视为 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）时， 表示项目之间的最小间距 （如同在单行中相邻弹性项目之间插入了额外的固定大小外边距）。

当应用于交叉轴（例如，row 弹性容器中的 row-gap）时， 表示相邻弹性行之间的最小间距。

网格容器

row-gap 和 column-gap 属性， 当在网格容器上指定时， 分别定义网格行和网格列之间的间距。 有关精确详细信息，请参见 CSS 网格布局 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 属性。）

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

行盒

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

块容器

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

但是，出于历史原因， 如果其 baseline-source 为 auto（初始值）， 则作为滚动容器的块级或内联级块容器 始终具有最后基线集， 其所有基线都对应于其块末端 外边距边缘。

多列容器

多列容器的第一基线集是具有最高（块起始端最近）基线的列或多列跨越者的第一基线集， 该基线对应于多列容器的对齐基线。 如果没有这样的行盒或子元素， 则多列容器没有第一基线集。

最后基线集类似， 但使用最后基线集和最低 （块末端最近）基线。

表格

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

在查找内联块的第一/最后基线集时， 必须跳过由表格盒贡献的任何基线。 （这是来自 [CSS2] 的历史行为。）

表格行

如果行中的任何单元格沿内联轴参与 第一基线/最后基线对齐， 则在执行对齐后，该行的第一/最后基线集将根据其共享对齐基线和该行的第一个可用字体生成。 否则，该行的第一/最后基线集将根据行中单元格的最低和最高内容边缘合成。 [CSS2]

跨越单元格仅在其跨越的第一行/最后一行中参与 第一基线/最后基线对齐。

弹性容器

请参阅 [CSS-FLEXBOX-1] 中的 弹性基线。

网格容器

请参阅 [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：静态位置术语

当给定轴上的两个内边距属性在绝对定位的盒子上都为 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. 变更

自 2023 年 2 月 17 日工作草案以来的变更包括：

• 使块容器默认使用 safe 对齐。 参见 § 4.4.1.3 所有其他对齐。 （问题 8992）
• 使绝对定位的盒子默认使用“智能”安全对齐，允许内边距修改的包含块的不安全溢出，同时保持在原始包含块内的安全性。 参见 § 4.4.1.2 绝对定位盒子的自对齐。 （问题 10316，问题 9960）
• 使所有 space-* 关键字回退到 safe 溢出。 （问题 10154）
• 明确定义溢出的内容分布和滚动容器的交互，使其不影响布局，仅影响可滚动溢出区域的范围。 （问题 4957）
• 仅当 baseline-source 为其初始值时，才对滚动容器块容器应用特殊的外边距边缘基线规则。 （问题 8214）
• 在合成正交流盒子的基线时，使假定的平行书写模式对 direction 敏感。 （问题 7775）

  否则，假定 horizontal-tb 或 vertical-lr 书写模式， 以与盒子自身的书写模式正交者为准。

  否则：

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

• 阐明跨越单元格在参与第一/最后基线对齐时，仅参与其跨越的第一行/最后一行。 （问题 7655）
• 将 grid-gap 属性定义为 gap 属性的旧名称别名。 （问题 8014）
• 将绝对定位盒子的 normal 对齐的定义推迟到 [css-position-3]。 （问题 11215，问题 11285）
• 更改了关于 row-gap 适用于多列容器的句子，以表明它适用于 [CSS-MULTICOL-2]。 （问题 11539）
• 定义了间距在分段断点处消失。 （问题 11520）

自 2021 年 12 月 24 日工作草案以来的变更包括：

• 定义多列容器的基线。 （问题 7856，问题 7639）
• 在确定静态位置时，使用静态位置包含块的书写模式。 （问题 7599，问题 7612；变更）
• 移除非 normal 对齐的可滚动溢出中包含内边距的特殊行为定义，因为这现在已在 [CSS-OVERFLOW-3] 中无条件定义。 （问题 129）
• 次要澄清：

  • 将基线共享组的回退对齐定义为其各个项目的共享回退对齐。

  • 使用CSS 方括号范围表示法注释 <length-percentage> 值定义。

自 2020 年 4 月 21 日工作草案以来的变更包括：

• 允许重新排序 <baseline-position> 的 [ first | last ] 和 baseline 组件。 （问题 5235）
• 使 space-around 和 space-evenly 的回退对齐包含 safe。 （问题 5088）
• 对 normal 对齐和百分比间距进行了各种更正，以匹配各自的布局规范。
• 更正了滚动容器的最后基线集的特殊旧式处理。 （问题 3611）
• 阐明没有基线集的盒子会根据需要合成其对齐基线。 （问题 3611）
• 阐明只有非替换盒子受内容分布影响。 （问题 4545）
• 阐明了盒子何时具有启用基线内容对齐的协调自对齐偏好，尤其是在涉及 auto 外边距时。 （问题 5923）
• 更好地定义基线自对齐和内容对齐如何交互。 （问题 6389）
• 阐明基线共享组如何确定其回退对齐。 （问题 7645）

自 2018 年 12 月 6 日工作草案以来的变更包括：

• 改进了绝对定位元素的中心自对齐。 问题 4659
• 修复了混合书写模式中基线对齐回退不一致的问题。 问题 3454
• 次要编辑修复和澄清。

自 2018 年 8 月 30 日工作草案以来的变更包括一些次要澄清。

自 2018 年 4 月 23 日工作草案以来的变更包括：

• 更好地定义了对齐属性如何与具有 auto 偏移量的绝对定位盒子交互。 参见 § 6.1.2 绝对定位的盒子，§ 6.2.2 绝对定位的盒子，§ 6.5 对具有静态位置内边距的绝对定位盒子的大小调整的影响，以及 附录 A：静态位置术语。
• 更详细地定义了内容分布属性如何在滚动容器上工作。 参见 § 5.3 对齐溢出和滚动容器。
• 指出了 CSS2 关于行内块滚动容器基线的特殊规则。
• 定义了在计算固有大小时，百分比间距相对于零计算，并在布局期间解析。 （问题 509）
• 杂项次要澄清。

自 2017 年 9 月 6 日工作草案以来的变更包括：

• 添加了更多插图！非常感谢 Melanie Richards 解决了困难的图表绘制问题。
• 修复了 gap 简写属性定义表中的错误。
• 定义当包含块的大小取决于间距时，百分比间距解析为零。 （问题 509，问题 2297）
• 修复了语法中处理 left 和 right 的错误。
• 修复了 space-align 回退对齐中的差异。 （问题 2316）
• 在盒子边缘不对齐的情况下，加强了基线对齐的处理。 （问题 1556，问题 1611）
• 杂项澄清。

自 2017 年 7 月 20 日工作草案以来的变更包括：

• 添加了 row-gap 和 column-gap 属性以及 gap 简写， 将它们应用于网格布局和弹性布局，以替换特定于网格的 grid-row-gap/grid-column-gap/grid-gap 属性。

自 2017 年 5 月 15 日工作草案以来的变更包括：

• 从 align-self 和 align-content 中删除了 left 和 right 关键字。 如果需要，它们可能会在更高版本中重新引入。 （问题 1403）
• 将 end 回退对齐分配给与 last baseline 内容对齐结合使用的 stretch 情况。
• 由于实现复杂性，禁用了表格列中单元格之间的基线对齐。
• David Baron 报告的大量次要更正和澄清（链接）。

自 2017 年 4 月 7 日工作草案以来的变更包括：

• 添加了一个章节以阐明部分实现的处理。 （问题 1167）
• 删除了 justify-content 的 <baseline-position> 值，因为它无论如何都做不了任何事情。 （问题 1184）
• 将指定回退对齐的能力推迟到第 4 级。 （问题 1002）
• 修复了 <overflow-position> 相对于 <content-position> 的位置。 （问题 1001）
• 修复了处理沿块轴对齐的基线对齐盒子的规则。 （问题 1038）
• 将 justify-items: auto 重命名为 justify-items: legacy。 （问题 1318）
• 将可滚动盒子的基线限制在边框边缘，而不是外边距边缘。 （问题 766）

11. 隐私注意事项

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

12. 安全注意事项

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

致谢

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