CSS 盒模型对齐概述

关键概念和术语

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

与书写模式的关系

对齐与书写模式相关，因为当我们对齐一个项目时，我们不考虑是否将其与上、右、下、左等物理维度对齐。相反，我们根据我们正在处理的特定维度的开始和结束来描述对齐。这确保了无论文档使用何种书写模式，对齐都能以相同的方式工作。

对齐的两个维度

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

在内联轴上对齐项目时，你将使用以 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 对这些值进行分组设置时，对齐主体将是应用该属性的元素的外边距盒（margin box）。justify-content 和 align-content 属性因布局方法而异。

对齐容器

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

下图展示了一个对齐容器，内部有两个对齐主体。

对齐类型

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

• 位置对齐
• 基线对齐
• 分布对齐

位置对齐

位置对齐是指对齐主体相对于其对齐容器的位置。位置对齐的关键字值为位置对齐定义，并且可以用作 justify-content 和 align-content 的内容对齐值，以及 justify-self 和 align-self 的自对齐值。

• center
• start
• end
• self-start
• self-end
• flex-start 仅用于 flexbox
• flex-end 仅用于 flexbox
• left
• right

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

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

两者都设置了 justify-content: start，但由于书写模式不同，两个起始位置也不同。

基线对齐

基线对齐是指在一个对齐上下文中，多个对齐主体的基线之间的关系。基线对齐的 <baseline-position> 关键字用于在一组对齐主体中对齐盒子的基线。它们可以作为 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 对一组盒子进行。

分布对齐

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

• stretch
• space-between
• space-around
• space-evenly

例如，在弹性布局中，项目最初使用 flex-start 对齐。在从上到下的水平书写模式下（例如英语），当 flex-direction 设置为 row 时，项目从最左侧开始，显示项目后所有可用空间都放在它们的后面。

如果你在弹性容器上设置 justify-content: space-between，可用空间现在将被分配并放置在项目之间。

要使这些关键字生效，你希望对齐项目的维度上必须有可用空间。没有空间，就无可分配。

基本示例

以下示例演示了一些盒模型对齐属性如何在网格和弹性盒中应用。

CSS 网格布局对齐示例

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

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

body {
  font: 1.2em sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  align-items: start;
  justify-content: space-between;
}

.box :first-child {
  align-self: center;
}

Flexbox 对齐示例

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

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
</div>

body {
  font: 1.2em sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.box :first-child {
  align-self: center;
}

溢出对齐

<overflow-position> 关键字 safe 和 unsafe 有助于定义当对齐主体大于对齐容器时的行为。safe 关键字将在指定对齐导致溢出的情况下对齐到 start，目的是避免“数据丢失”，即项目的一部分超出对齐容器的边界且无法滚动到。

如果你指定 unsafe，那么即使会导致此类数据丢失，对齐也会被遵守。

盒之间的间距

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

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

• row-gap
• column-gap
• gap

在下面的示例中，一个网格布局使用 gap 简写属性在行轨道之间设置了 10px 的间距，在列轨道之间设置了 2em 的间距。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

body {
  font: 1.2em sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 2em;
}

.box :first-child {
  align-self: center;
}

早期的网格实现包含了带 grid- 前缀的 gap 属性。所有浏览器都支持无前缀的属性，但你可能会在代码库中看到以下属性：grid-row-gap、grid-column-gap 和 grid-gap。带前缀的版本是无前缀版本的别名。

请注意，其他因素也可能会增加显示的视觉间距，例如使用空间分布关键字或为项目添加外边距。

按布局类型划分的盒模型对齐

由于 CSS 盒模型对齐属性的实现在与不同规范交互时有所不同，请参考以下指南以了解如何将对齐属性用于各种布局类型的详细信息：

• Flexbox 中的盒模型对齐
• CSS 网格布局中的盒模型对齐
• 多列布局中的盒模型对齐
• 块级、绝对定位和表格布局的盒模型对齐

另见

• CSS display 模块
• CSS 弹性布局模块
• flexbox 的基本概念
• 在弹性容器中对齐项目
• CSS 网格布局模块
• 网格布局中的盒模型对齐