当前位置：文江博客知识库简体中文文档 Web CSS CSS_Box_Alignment

CSS盒子对齐 - CSS（层叠样式表）编辑

CSS盒子对齐(Box Alignment)模块指定了在各种CSS盒子布局模型，如块布局，表布局，弹性布局和网格布局中，与盒子对齐有关的CSS功能。该模块旨在建立一种能一致地在CSS中指定对齐的方法。这份文档详述了出现在该规范中的一般概念。

注意：每种布局方法的文档都将详细说明在其中是如何应用“盒子对齐”的

较老的对齐方法

传统上，CSS的对齐功能非常有限。我们可以利用 text-align 对齐文本，利用auto margin 对齐块，并且利用 vertical-align 属性在表格(table)或者行内块(inline-block)布局中对齐块。现在 Inline Layout 与 CSS Text 模块中涵盖了文本对齐的内容，而盒子对齐模块让我们第一次拥有了完整的水平与垂直对齐的能力。

如果你最初学习过弹性盒子(Flexbox)，你可能会觉得这些属性是弹性盒子规范的一部分。确实，某些属性是列在弹性盒子的 Level 1 标准中，不过规范指出我们应该提到盒子对齐规范，因为它可能会弹性盒子的基础上增加额外的功能。

下面使用网格布局的示例中，在行内轴(inline axis)（主轴(main axis)）上布局了固定宽度的轨道后，网格容器中有一些多余的空间。这些空间是使用 justify-content 来分配的。在块轴(block axis)（交叉轴(cross axis)）上，项目在他们的网格区域内的对齐是用 align-items 来控制的。第一个项目通过将 align-self 设置为 center，重载了组内设置的 align-items 属性。

弹性盒子对齐示例

在下面的示例中，三个弹性项目分别利用 justify-content 和 align-items 属性在主轴和交叉轴上对齐。第一个项目通过将 align-self 设置为 center，重载了组内设置的 align-items 属性。

关键概念与术语

规范详细介绍了一些对齐术语，让我们能更容易地在特定布局方法内的具体实现之外讨论这些对齐属性。另外其中还有一些对于所有布局方法都通用的关键概念。

与书写模式的关系

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

对齐的两个维度

使用盒子对齐属性时，我们会在两个轴的其中之一上对齐内容——行内轴(inline axis)（或称主轴(main axis)）和块轴(block axis)（或称交叉轴(cross axis)）。内联轴是在使用特定写作模式中，沿句子单词的流动方向的轴。比如对于英语或者中文来说，内联轴是水平的。块轴是沿块(block)（比如段落元素）的布局方向延伸的轴，它会垂直穿过行内轴。

当在行内轴上对齐项目时，你将用到以 justify- 开头的属性：

当在块轴上对齐项目时，你将用到以 align- 开头的属性：

在弹性盒子布局中，情况要更复杂些，因为当 flex-direction 设置为 row 时，上面的这些说法都是对的。但当弹性盒子设为 column 时则恰好相反（行内轴上的对齐用 justify- 指定，块轴上用 align- ）。因此，当使用弹性盒子时，用主轴和交叉轴来思考要比用行内轴和块轴来思考更直观些。 justify- 属性总是用来对齐主轴，而 align- 属性总是用来对齐交叉轴的。

对齐主体

对齐主体 指的是被对齐的物体。对于 justify-self 或 align-self ，或者将以上两值用 justify-items 或 align-items 成组设置时，对齐主体将是使用此属性的元素的外边距盒子(margin box)。 justify-content 和 align-content 属性因布局方法而异。

对齐容器

对齐容器 指的是对齐主体被对齐时所处的盒子。这一般指的是包含对齐主体的块。一个对齐容器可能包含一个或多个对齐主体。

下图展示了一个内部包含两个对齐主体的对齐容器。

回退对齐

如果设置的对齐方式无法实现，那么 回退对齐 将派上用场并且处理可用的空间。这一回退对齐是为每种布局方法分别指定的，且在方法的对应页面上有详细说明。

对齐的种类

规范中详述了三种不同的对齐方式；这些对齐使用关键字值。

位置对齐(Positional alignment)：通过对齐主体与它的对齐容器间的关系来指定对齐主体的位置。
基线对齐(Baseline alignment)：这些关键字把对齐看作在一个对齐上下文中多个对齐主体的基线(baseline)之间的关系。
分布对齐(Distributed alignment)：这些关键字把对齐看作多个对齐主体间空间的分布

位置对齐关键字的值

以下这些值是为位置对齐定义的，并且可以用于指定内容对齐的 justify-content 和 align-content 属性与指定自对齐的 justify-self 和 align-self 属性上。

center
start
end
self-start
self-end
flex-start 仅用于弹性盒子布局
flex-end 仅用于弹性盒子布局
left
right

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

比如，当使用 CSS 网格布局时，如果你使用了英语并且把 justify-content 设为 start ，那么这一设置将会在行内维度上把项目移动到起始位置，也就是左侧，因为英语中句子的开头就在左侧。如果你使用的是阿拉伯语，一种从左到右书写的语言，那么相同的 start 值会导致项目移动到右侧，因为页面的右手边才是阿拉伯语中句子的开头。

这两个例子都设置了 justify-content: start，但是起始位置却随着书写模式而改变了。