CSS 盒模型对齐

**CSS 盒子对齐**模块指定了与在各种 CSS 盒子布局模型中盒子对齐相关的 CSS 特性：块级布局、表格布局、Flex 布局和 Grid 布局。该模块旨在为所有 CSS 创建一致的对齐方法。本文档详细介绍了规范中发现的一般概念。

注意：**每个布局方法的文档将详细说明如何在该方法中应用盒子对齐。

旧的对齐方法

CSS 传统上只有非常有限的对齐功能。我们可以使用text-align对齐文本，使用自动margin居中块级元素，并在表格或内联块级布局中使用vertical-align属性。文本的对齐现在由内联布局和CSS 文本模块涵盖，并且在盒子对齐中首次拥有完整的水平和垂直对齐功能。

如果您最初学习的是Flexbox，那么您可能会认为这些属性是 Flexbox 规范的一部分，并且某些属性确实列在 Flexbox 的第 1 级中。但是，规范指出应参考盒子对齐规范，因为它可能会添加超出 Flexbox 当前功能的其他功能。

基本示例

以下示例演示了如何在Grid和Flexbox中应用某些盒子对齐属性。

CSS 网格布局对齐示例

在此使用网格布局的示例中，在内联（主）轴上布置固定宽度轨道后，网格容器中存在额外的空间。此空间使用justify-content进行分配。在块级（交叉）轴上，项目在其网格区域内的对齐方式由align-items控制。第一个项目通过将align-self设置为center来覆盖组上设置的align-items值。

Flexbox 对齐示例

在此示例中，三个 Flex 项目使用justify-content在主轴上对齐，使用align-items在交叉轴上对齐。第一个项目通过将align-self设置为center来覆盖组上设置的align-items。

关键概念和术语

规范详细说明了一些对齐术语，以便在特定布局方法中实现这些对齐属性之外更容易地讨论这些对齐属性。还有一些关键概念是所有布局方法共有的。

与书写模式的关系

对齐与书写模式相关联，因为当我们对齐项目时，我们不考虑是否将其对齐到顶部、右侧、底部和左侧的物理尺寸。相反，我们根据正在使用的特定维度的开始和结束来描述对齐方式。这确保了无论文档具有哪种书写模式，对齐方式都以相同的方式工作。

两个对齐维度

使用盒子对齐属性时，您将在两个轴之一上对齐内容——内联（或主）轴和块级（或交叉）轴。内联轴是句子中单词在所用书写模式中流动的轴——例如，对于英语，内联轴是水平的。块级轴是段落元素等块级元素排列的轴，它贯穿内联轴。

在内联轴上对齐项目时，您将使用以justify-开头的属性。

justify-items

justify-self

justify-content

在块级轴上对齐项目时，您将使用以align-开头的属性。

align-items

align-self

align-content

Flexbox 引入了一个额外的复杂之处，即当flex-direction 设置为 row 时，上述内容成立。当 Flexbox 设置为 column 时，这些属性会交换。因此，在使用 Flexbox 时，更容易考虑主轴和交叉轴，而不是内联和块。justify- 属性始终用于在主轴上对齐，align- 属性用于在交叉轴上对齐。

对齐主体

对齐主体 是正在对齐的对象。对于 justify-self 或 align-self，或者当使用 justify-items 或 align-items 将这些值作为一组设置时，这将是使用此属性的元素的边距盒。justify-content 和 align-content 属性根据布局方法的不同而有所不同。

对齐容器

对齐容器 是主体在其内部对齐的盒子。这通常是对齐主体的包含块。一个对齐容器可能包含一个或多个对齐主体。

下图显示了一个对齐容器，其中包含两个对齐主体。

回退对齐

如果设置的对齐方式无法满足，则回退对齐将发挥作用并处理可用空间。此回退对齐方式针对每种布局方法单独指定，并在该方法的页面上详细说明。

对齐类型

规范中详细说明了三种不同的对齐类型；这些类型使用关键字值。

位置对齐：指定对齐主体相对于其对齐容器的位置。

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

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

位置对齐关键字值

以下值是为位置对齐定义的，可以用作内容对齐（使用 justify-content 和 align-content）以及自对齐（使用 justify-self 和 align-self）的值。

center

start

end

self-start

self-end

仅限 Flexbox 的 flex-start

仅限 Flexbox 的 flex-end

left

right

除了与屏幕物理属性相关的 left 和 right 的物理值之外，所有其他值都是逻辑值，并与内容的书写模式相关。

例如，在使用 CSS 网格布局时，如果使用英语并将其 justify-content 设置为 start，这将使内联维度中的项目移动到开头，这将是左侧，因为英语句子从左侧开始。如果使用阿拉伯语（一种从右到左的语言），则相同的 start 值将导致项目移动到右侧，因为阿拉伯语句子从页面右侧开始。

这两个示例都具有 justify-content: start，但是 start 的位置根据书写模式而变化。

基线对齐

基线对齐关键字用于在一组对齐主体中对齐盒子的基线。它们可以用作内容对齐（使用 justify-content 和 align-content）以及自对齐（使用 justify-self 和 align-self）的值。

baseline

first baseline

last baseline

基线内容对齐——为 justify-content 或 align-content 指定基线对齐值——在将项目以行方式布局的布局方法中有效。通过在盒子内部添加填充，将对齐主体彼此基线对齐。

基线自对齐通过在盒子外部添加边距来移动盒子以通过基线对齐。自对齐是在使用 justify-self 或 align-self 时，或者当使用 justify-items 和 align-items 将这些值作为一组设置时。

分布对齐

分布对齐关键字 与 align-content 和 justify-content 属性一起使用。这些关键字定义在显示对齐主体后任何额外空间将如何处理。值如下：

stretch

space-between

space-around

space-evenly

例如，在 Flex 布局中，项目最初使用 flex-start 对齐。在像英语这样的水平从上到下的书写模式下工作，当 flex-direction 为 row 时，项目从最左侧开始，显示项目后任何可用空间都放置在项目之后。

如果在 Flex 容器上设置 justify-content: space-between，则可用空间现在将被共享并放置在项目之间。

为了使这些关键字生效，需要在希望对齐项目的方向上存在可用空间。如果没有空间，就没有可供分配的空间。

溢出对齐

safe 和 unsafe 关键字有助于定义当对齐主体大于对齐容器时的行为。如果指定的对齐方式导致溢出，则 safe 关键字将对齐到 start，目的是避免“数据丢失”，即项目的一部分位于对齐容器的边界之外且无法滚动到。

如果指定 unsafe，则即使会导致此类数据丢失，也会遵守对齐方式。

盒子之间的间隙

盒子对齐规范还包括 gap、row-gap 和 column-gap 属性。这些属性可以在任何以这种方式排列项目的布局方法中，启用在行或列中的项目之间设置一致的间隙。

gap 属性是 row-gap 和 column-gap 的简写，它允许我们一次设置这些属性。

row-gap

column-gap

gap

在下面的示例中，网格布局使用 gap 简写来设置行轨道之间的 10px 间隙，以及列轨道之间的 2em 间隙。

注意：早期的网格实现包含以 grid- 为前缀的 -gap 属性。所有浏览器现在都支持无前缀的属性，尽管您可能会在示例和教程中看到以下旧版属性：grid-row-gap、grid-column-gap 和 grid-gap。带前缀的版本将作为无前缀版本的别名保留。

请注意，其他一些因素可能会增加显示的视觉间隙，例如使用空间分配关键字或向项目添加边距。