flexbox布局模块对齐属性

对齐可能是 flexbox 最令人困惑的方面。flexbox布局模块有一些对齐属性，它们在不同情况下表现不同，使用它们时，您可能不一定了解发生了什么或为什么。

但是，如果您知道要注意什么，对齐就没有最初出现的那么复杂。本教程将帮助您完美理解 flexbox 对齐。

本 Flexbox 指南

在本 flexbox 指南中，我们将介绍以下内容：

视频讲解器：Flexbox 对齐
两个轴的故事（如何在 flexbox 中使用主轴和交叉轴）
从定义主轴开始
Flexbox 对齐属性
沿主轴对齐
沿交叉轴对齐

两轴的故事

使用 flexbox 时，我们使用两个轴：主轴和交叉轴。正如它们的名字所暗示的，这些轴形成了一种层次关系，主轴优于交叉轴。

flexbox布局模块对齐属性第1张

横轴始终垂直于主轴。

这种层次关系构成了 flexbox 和 css Grid Layout 的主要区别。按照设计，CSS 网格有两个非层次轴：行轴和列轴。这是因为 Web 标准的创建者打算将 CSS 网格用作二维布局模型。另一方面，Flexbox 有一个主轴和一个辅助轴，因为它的目的是成为一维布局模型。flexbox 最酷的部分是您可以通过设置主轴的位置来定义该一维的方向，因此您可以创建基于行和基于列的布局。

为避免被对齐属性混淆，请始终记住，当您使用 flexbox 时，您使用的是一维模型。即使你的布局看起来像它有两个维度（即行和列），弹性项目也只能在一个方向上流动，沿着主轴。您可以在一个方向上对齐弹性项目，并沿交叉轴对齐各个项目之间的间距。

从定义主轴开始

主轴的方向由flex-direction属性决定——有四个可能的值：

flex-direction: row; - 主轴从左到右运行（这是默认值）
flex-direction: row-reverse;– 主轴从右到左运行
flex-direction: column;- 主轴从上到下运行
flex-direction: column-reverse;- 主轴从下到上运行

让我们看看它在浏览器中的样子。我将使用非常简单的 html 标记，只有九个框相互堆叠：

<div class="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
</div>

带有类的外部 div.container将是 flex 容器，带有.item类的内部 div 将是 flex 项。

1.从左到右：行

如前所述，默认的弯曲方向是row; 如果您没有设置任何其他内容，这将是使用的值。正如您在下面看到的，我只向 flex 容器添加了与 flexbox 相关的属性。弹性物品被赋予了一些用于装饰目的的属性：

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

当flex-direction为row时，主轴水平运行，从左到右。因此，这是弹性项目的布局方向。交叉轴从上到下垂直运行，当物品包裹时，它们会沿着这个方向进行。

See the Pen Flexbox Alignment 1 by Envato Tuts+ (@tutsplus) on CodePen.

2. 从右到左：row-reverse

当 flex-direction 的值为 row-reverse时，轴的位置保持不变，这意味着主轴仍将水平运行，而交叉轴仍将垂直运行。但是，行方向将反转：沿主轴从右到左。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

如果您查看 flex 项目的编号，您现在可以看到，每一行都是从右到左编号的，但项目仍然垂直向下环绕。

See the Pen Flexbox Alignment 2 by Envato Tuts+ (@tutsplus) on CodePen.

如果您还想反转交叉轴的方向，则需要wrap-reverse在flex-wrap属性上使用。指出不同：

See the Pen Flexbox Alignment 2: wrap-reverse by Envato Tuts+ (@tutsplus) on CodePen.

3. 从上到下：列

当flex-direction设置为 column时，主轴和交叉轴改变它们的位置。主轴将垂直运行（从上到下），横轴将水平运行（从左到右）。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

现在你会看到弹性项目的编号不是按照行，而是按照列。这可能是 flexbox 的一维特性最明显的地方。仅当容器具有固定高度时，项目才会包装。

See the Pen Flexbox Alignment 3 by Envato Tuts+ (@tutsplus) on CodePen.

4. 自下而上：列反向

我希望您看到这里正在发展一种模式。当flex-direction设置为 column-reverse时，主轴仍然是垂直的，而交叉轴仍然是水平的，就像我们在前面的例子中看到的那样。但是，列方向相反，因此主轴从底部指向顶部。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

正如您在下面看到的，弹性项目的编号从左下角开始，向上和向右移动。

See the Pen Flexbox Alignment 4 by Envato Tuts+ (@tutsplus) on CodePen.

同样，要更改交叉轴的方向，您需要使用wrap-reverseon flex-wrap属性。

弹性流速记

该 flex-flow 属性是flex-direction和的简写flex-wrap。例如，您可以使用：

flex-flow: column wrap;

代替：

flex-direction: column;
flex-wrap: wrap;

Flexbox 对齐属性

Flexbox 对齐可以沿主轴和交叉轴进行。

其中一个属性 ( justify-content) 属于主轴，而其他三个 ( align-items, align-self, align-content) 属于交叉轴。

正如您所料，对齐属性的行为取决于 flex-direction 属性。例如，如果是或，justify-content则水平对齐项目，如果flex-direction是row或，则row-reverse垂直对齐项目。这是灵活盒子的真正美。flex-directioncolumncolumn-reverse

沿主轴对齐

justify-content属性沿主轴对齐 flex 容器内的 flex 项。在浏览器计算完弹性容器中所有项目的必要空间后，它会分配剩余的额外空间。justify-content 属性可以取五个值：

flex-start- 弹性项目朝向主轴的起点对齐（这是默认设置）

flex-end- 弹性项目在主轴末端对齐

center- 弹性项目围绕主轴中心对齐

space-between- 弹性项目沿主轴均匀分布，从 flex-start 到 flex-end

space-around- 弹性项目沿主轴均匀分布，但在每一端添加一半大小的空间

要justify-content正确使用，您需要注意轴的方向。例如，该justify-content: flex-start;规则总是将弹性项目挤压到主轴的起点。flex-direction 为时为左端row，为时为右端，为时row-reverse为最上点，为时column为最下点column-reverse。

下面的笔显示了justify-content当 flex-direction 为时，属性的不同值如何对齐弹性项目row。

See the Pen Flexbox Alignment: justify-content by Envato Tuts+ (@tutsplus) on CodePen.

沿交叉轴对齐

是时候让事情更上一层楼了。您可以使用三个CSS 属性沿交叉轴对齐项目。其中两个（align-items和align-self）用于单行对齐，而align-content用于多行对齐。

单线对齐

align-items和align-self 属性定义了空间是如何沿着交叉轴分布在弹性项目之间的。实际上，两者都做同样的事情，但是在align-items对齐 flex 容器内的所有项目时，align-self会覆盖单个 flex 项目的默认对齐方式。

两者都可以采用以下值：

auto- 使 align-self 属性继承 align-items 的值（align-self 的默认值）
flex-start- 弹性项目与横轴的起点对齐
flex-end- 弹性项目朝向横轴的末端对齐
center- 弹性项目围绕交叉轴的中心对齐
baseline - 弹性项目对齐，使得它们的基线对齐对齐
stretch- 弹性项目沿横轴拉伸以填充弹性容器（对齐项目的默认设置）

下面的笔显示了flex-direction 为时align-items和align-self属性的行为row。默认情况下，交叉轴从上到下运行。这些项目具有不同的填充量，以改变它们的高度和基线。例如，您可以看到，该flex-start值将项目与交叉轴的起点flex-end对齐，而将它们与终点对齐。

See the Pen Flexbox Alignment: Single-line Alignment by Envato Tuts+ (@tutsplus) on CodePen.

自然，当flex-directioniscolumn或时column-reverse，您将使用基于列的布局，因此align-itemsandalign-self属性将改为水平对齐项目。