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 值与单位 [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 时的方式对齐对齐对象。 但对于绝对定位的框，请参阅§ 4.4.1.2 绝对定位框的自身对齐。

unsafe

无论对齐对象与对齐容器的相对尺寸如何， 都遵循给定的对齐值。

默认（未指定值）

如果未明确指定溢出 对齐， 则默认溢出对齐是“safe”和“unsafe” 的混合形式。 详情请参阅§ 4.4.1 自动溢出对齐安全性。

4.4.1. 自动溢出对齐安全性

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

4.4.1.1. 滚动容器的内容分布

在滚动 容器的可滚动轴中， 内容分布的默认溢出 对齐行为为 unsafe。 内容分布属性的非 normal 值则会 改变可滚动溢出区域，以便能够访问 溢出的内容。 请参阅§ 5.3 对齐溢出与滚动容器。

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

对于相关使用值不为 normal 的自身对齐属性所对应的 绝对定位对齐对象， 默认和 safe 溢出对齐行为 如下：

（对于不满足上述条件的绝对定位对齐对象， 请参阅 § 4.4.1.3 所有其他对齐。）

注：这些规则约束框的位置，以 尽量减少溢出， 同时尽可能遵循指定的对齐方式， 并确保框的尺寸变化时行为保持连续。

需要更精确地定义“随 页面滚动”， 以涵盖所有包含在可滚动溢出区域内或锚定到该区域内的锚点。

4.4.1.3. 所有其他对齐

对于所有其他元素：

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

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

实现“智能”默认行为 可能无法与现有 Web 内容兼容 （尽管我们希望能够兼容，并认为很有可能）， 因此用户代理应将有关这一点的任何反馈提交给工作组。 尚未实现“智能”默认行为的用户代理 对于块 容器上的 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. 基线内容对齐

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

注：未完全支持基线内容对齐的实现，在适用的格式化上下文中， 不得将 baseline 值解析为 有效值。 WPT 缺乏测试覆盖不能成为发布 有缺陷实现的借口。 <—​目前浏览器会解析它，但并未用它实现任何有用的功能。:( https://github.com/w3c/csswg-drafts/issues/13421 -->

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

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

表格单元格：

一个（非替换）表格单元格， 如果其行内轴与表格自身的行内轴平行，且 其计算后的 align-content 为 first baseline（last baseline）， 则在其最靠起始端（结束端）的行中 参与首次（末次）基线内容对齐。

注：不支持对共享同一列的单元格 进行基线 内容对齐； 不过，如果有足够的需求和实现者兴趣， 未来级别可能会添加此功能。

弹性项目：

一个非替换弹性项目 在其弹性行中 参与首次（末次）基线内容对齐， 如果其计算后的 align-content 为 first baseline/last baseline， 且其行内轴与主轴平行。

网格项目：

一个非替换网格项目 在其最靠起始端（结束端）的行或列中 （取决于哪一个与其行内 轴平行） 参与首次（末次）基线内容对齐， 前提是其计算后的 align-content 为 first baseline/last baseline。

此外， 要参与基线内容对齐， 还必须具有协调的自身对齐偏好， 以确保该框的相关边缘 与其基线共享组中的其他框对齐。 也就是说，当其基线对齐偏好为“first”（“last”）时， 该框的起始（结束）外边距边缘 必须预期与其包含块的对应边缘对齐， 且实际上也必须对齐。 否则，采用其回退对齐。

更多详情请参阅§ 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 中的规则时， 凡是引用 静态位置包含块的 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. 盒子之间的间隙

本节已移至 CSS 间隙第 1 级 § 2 框之间的间隙。

9. 基线对齐详情

基线共享组中的框使用其对齐 基线彼此对齐。 例如，在水平书写模式中， 对同一行中的表格单元格指定 align-content: baseline 将对齐其首个 格式化行的基线。 本节准确定义基线对齐的执行方式， 并考虑国际化现代 CSS 中存在的众多基线和书写 模式 。

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

9.1. 确定盒子的基线

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

框的首个和最后一个基线集 会根据布局模型 按如下方式分别确定：

行框

行框的首次/末次基线集 根据其根行内 框的主导基线 和字体设置生成。

块容器

块容器的首次/末次基线集 取自块容器中的第一个/最后一个流内行框， 或块容器中提供首次/末次基线集的 第一个/最后一个流内块级子元素， 以最先/最后出现的为准。 如果不存在这样的行框或子元素， 则该块容器没有基线集。

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

多列容器

多列容器的首次基线集 是具有最高（最靠近块起始端）基线的 列或跨列元素的首次基线集， 该基线对应于多列容器的对齐 基线。 如果不存在这样的行框或子元素， 则该多列容器没有首次基线集。

末次基线集的确定方式 类似， 但使用末次基线集 和最低（最靠近块结束端）的基线。

表格

表格框的首次/末次基线集 是其第一行/最后一行的首次/末次基线集 （在对表格行 组框进行任何重新排序之后）。

查找行内块的首次/末次基线集时， 必须跳过由表格框提供的任何基线。 （这一特殊行为是 [CSS2] 遗留的行为。）

表格行

表格行框的首次基线集 取自以下第一个可用的选项：

1. 如果该行中的任何单元格沿表格的行内轴参与首次基线对齐， 则在完成对齐后， 根据它们共享的对齐基线 和该行的第一个可用字体 生成一个基线集。

2. 否则，如果该行中的任何单元格沿表格的行内轴参与末次基线对齐， 则根据该对齐基线生成。

3. 否则，如果该行不为空， 则根据该行所有单元格中最低和最高的内容边缘 合成。 请参阅CSS 2 § 17.5.3 表格高度算法。

4. 否则， 使用表格 行框自身的块起始内容 边缘 作为对齐基线。

为此， 如果跨越多行的表格单元格 不是从该行开始跨越的，则忽略该单元格； 但对于步骤 2， 如果其跨越范围不在该行结束，则忽略该单元格。

末次基线的处理方式与此类似 （将“首次”与“末次”、“起始”与“结束”互换）。

对于 first baseline/last baseline， 跨行单元格仅参与其所跨越的第一行/最后一行。

弹性容器

请参阅 [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。

为了确定框的基线， 必须将该框及其所有作为块轴滚动容器的流内后代 视为已滚动至其初始滚动位置。 此外， 如果滚动容器的首次/末次基线位置 位于其边框边缘之外， 则该基线的位置会被限制在边框边缘处。

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. 变更

自 2026 年 1 月 30 日的工作 草案以来的变更包括：

• 将 gap 属性移至 [css-gaps-1]。 （议题 13312）

• 使用 safe 将绝对定位框限制在其原始包含块内。 （议题 14008）

• 改进查找表格和网格容器基线的算法。 （议题 7655， 议题 7641）

• 明确对滚动容器的特殊处理，以便独立处理每个轴， 因为现在容器可以仅在一个轴上滚动。 （议题 12289）

• 添加提醒：不得将根本不支持的值解析为有效值。 （13421）

另见之前的更改。

11. 隐私注意事项

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

12. 安全注意事项

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

致谢

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