Flex容器中项目的对齐方式

在本指南中，我们将介绍以下属性。

• justify-content：控制所有项目在主轴上的对齐方式。
• align-items：控制所有项目在交叉轴上的对齐方式。
• align-self：控制单个 Flex 项目在交叉轴上的对齐方式。
• align-content：控制交叉轴上 Flex 行之间的空间。
• gap、column-gap 和 row-gap：用于在 Flex 项目之间创建间隙或沟槽。

我们还将了解如何在 Flexbox 中使用自动外边距进行对齐。

设置在 Flex 容器上的 align-items 属性和设置在 Flex 项目上的 align-self 属性控制 Flex 项目在交叉轴上的对齐方式。如果 flex-direction 为 row，则交叉轴沿列向下运行；如果 flex-direction 为 column，则交叉轴沿行运行。

在这个基本的 Flex 示例中，我们正在使用交叉轴对齐。当我们将 display: flex 添加到容器时，子项目会变成以一行排列的 Flex 项目。默认情况下，它们都会拉伸以匹配最高项目的的高度，因为该项目定义了交叉轴上项目的的高度。如果 Flex 容器设置了高度，则项目会拉伸到该高度，而不管每个项目中包含多少内容。

项目变得相同高度的原因是，控制交叉轴上对齐方式的属性 align-items 的初始值为 stretch。

我们可以使用其他值来控制项目如何对齐

• align-items: stretch
• align-items: flex-start
• align-items: flex-end
• align-items: start
• align-items: end
• align-items: center
• align-items: baseline
• align-items: first baseline
• align-items: last baseline

在下面的示例中，align-items 的值为 stretch。尝试其他值，并查看项目在 Flex 容器中如何相互对齐。

align-items 属性将 align-self 属性设置为所有 Flex 项目的组。这意味着您可以显式声明 align-self 属性来定位单个项目。align-self 属性接受与 align-items 相同的所有值，以及 auto 值，该值会将值重置为 Flex 容器上定义的值。

在接下来的实时示例中，弹性容器具有align-items: flex-start，这意味着所有项目都与交叉轴的起始位置对齐。使用first-child选择器，第一个项目设置为align-self: stretch。另一个带有selected类的项目设置为align-self: center。更改align-items的值或更改各个项目上的align-self的值，以查看其工作原理。

到目前为止，我们已经研究了当flex-direction默认为row时，在从上到下书写的语言中，使用水平主轴和垂直交叉轴时的对齐行为。

保持相同的书写模式，当flex-direction更改为column时，align-items和align-self属性将项目对齐到左侧和右侧，而不是顶部和底部；这些属性仍然沿交叉轴对齐项目，但交叉轴现在是水平的！

您可以在下面的示例中尝试一下，该示例具有一个flex-direction: column的弹性容器，但在其他方面与上一个示例完全相同。

到目前为止，我们一直专注于对齐包含一行弹性项目的弹性容器区域内的项目或单个项目。当允许弹性项目跨多行换行时，可以使用align-content属性来控制行之间空间的分布，也称为打包弹性行。

要使align-content生效，弹性容器的交叉轴尺寸（在本例中为高度）必须大于显示项目所需的尺寸。然后它作为一个集合对所有项目起作用。align-content的值决定了额外可用空间和整个项目集在其内的对齐方式。

align-content属性采用以下值

• align-content: flex-start
• align-content: flex-end
• align-content: start
• align-content: fend
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: space-evenly
• align-content: stretch
• align-content: normal（表现为stretch）
• align-content: baseline
• align-content: first baseline
• align-content: last baseline

在下面的实时示例中，弹性容器的高度为400像素，这超过了显示项目所需的尺寸。align-content的值为space-between，这意味着可用空间在弹性行之间共享，这些弹性行与容器在交叉轴上的起始和结束位置齐平。

尝试其他值以查看align-content属性的工作原理。

我们再次可以将flex-direction切换到column，以查看我们在按列工作时此属性的行为。与之前一样，我们需要在交叉轴上留出足够的空间，以便在显示所有项目后留出一些空闲空间。

现在我们已经了解了交叉轴上的对齐方式的工作原理，我们可以看一下主轴。在这里，我们只有一个属性可用 - justify-content。这是因为我们仅将项目作为主轴上的一个组进行处理。使用justify-content，我们控制可用空间的处理方式，如果空间大于显示项目所需的空间。

在我们最初的示例中，容器上使用display: flex，项目显示为一行，并且都与容器的起始位置对齐。这是由于justify-content的初始值为normal，其行为类似于start。任何可用空间都放置在项目的末尾。

baseline值在此维度中不相关。否则，justify-content属性接受与align-content相同的值。

• justify-content: flex-start
• justify-content: flex-end
• justify-content: start
• justify-content: end
• justify-content: left
• justify-content: right
• justify-content: center
• justify-content: space-between
• justify-content: space-around
• justify-content: space-evenly
• justify-content: stretch（表现为start）
• justify-content: normal（表现为stretch，其行为类似于start）

在下面的示例中，justify-content的值为space-between。显示项目后，可用空间分布在项目之间。左侧和右侧项目与起始和结束位置齐平。

如果主轴位于块方向，因为flex-direction设置为column，则justify-content将在此维度中在项目之间分配空间，只要弹性容器中有空间分配即可。

请记住，对于所有这些对齐方法，start和end的值都与书写模式相关。如果justify-content的值为start，并且书写模式为从左到右，如英语，则项目将从容器的左侧开始对齐。

但是，如果书写模式为从右到左，如阿拉伯语，则项目将从容器的右侧开始对齐。

下面的实时示例将direction属性设置为rtl，以强制对项目进行从右到左的流动。您可以删除它，或更改justify-content的值，以查看当内联方向的起始位置在右侧时弹性盒的行为。

如果您更改flex-direction属性（例如，使用row-reverse而不是row），则行的start方向也将发生变化。

在接下来的示例中，flex-direction: row-reverse和justify-content: flex-end定义了弹性容器内项目的排列方向和位置。在从左到右的语言中，项目排列在左侧。尝试将flex-direction: row-reverse更改为flex-direction: row。您将看到项目现在移动到右侧，并且项目的视觉顺序已反转。

虽然这一切可能看起来有点令人困惑，但要记住的规则是，除非您采取措施进行更改，否则弹性项目会沿着内联、行轴按照文档语言中单词的排列方向进行布局。start和flex-start将是文本句子开头的起始位置。

您可以通过选择flex-direction: column将其切换为在文档语言的块方向中显示。然后，start和flex-start将是您第一段文本开头的起始位置。

如果您将flex-direction更改为其中一个反向值，它们将从结束轴开始并以与文档语言中单词写入方式相反的顺序进行布局。然后，start和flex-start将更改为该轴的结束位置 - 因此，对于在行中工作时的换行位置，或者在块方向的最后一段文本的结束位置。

我们没有在主轴上提供可用的justify-items或justify-self属性，因为我们的项目在此轴上被视为一个组。但是，可以通过使用自动边距以及弹性盒来实现一些单独的对齐，以便将项目或一组项目与其他项目分开。

一个常见的模式是导航栏，其中一些关键项目对齐到右侧，主要组位于左侧。您可能会认为这应该是justify-self属性的使用案例。但是，请考虑下面的图片。例如，以以下图片为例，其中一侧有三个项目，另一侧有两个项目。如果justify-self适用于弹性项目并在项目d上设置，它也会更改其后项目e的对齐方式，这可能是也可能不是预期的结果。

相反，可以使用CSS边距将d项目推开。

在此实时示例中，通过将margin-left设置为auto，项目4与前三个项目分开，这会消耗其轴上尽可能多的空间。这就是使用margin自动左右居中块的方式。每一侧都尝试占用尽可能多的空间，因此块被推到中间。

在此实时示例中，弹性项目以行为单位排列，并使用基本弹性值，并且在第四个项目上设置的类push将margin-left: auto应用于该项目。尝试删除第四个项目上的类或将类添加到其他项目以查看其工作原理。

要在弹性项目之间创建间隙，请使用gap、column-gap和row-gap属性。column-gap属性在行中的项目之间创建间隙。row-gap属性在您将flex-wrap设置为wrap时，在弹性行之间创建间隙。

gap属性是一个简写，它同时设置了row-gap和column-gap。弹性项目或弹性行之间的间隙取决于方向。如果flex-direction属性创建行，则第一个值定义弹性行之间的间隙，第二个值定义每行中项目之间的间隙。对于列（当flex-direction设置为column或column-reverse时），第一个值定义弹性项目之间的间隙，第二个值定义弹性行之间的间隙。

• CSS盒子对齐模块
• CSS弹性盒子布局模块
• Flexbox 中的盒子对齐
• Grid 布局中的盒子对齐