flexbox_Flexbox对准综合指南

最新推荐文章于 2025-12-25 22:55:50 发布

翻译最新推荐文章于 2025-12-25 22:55:50 发布 · 194 阅读

文章标签：

#css #flex #面试 #人工智能 #java

本文深入解析Flexbox布局中的对齐属性，包括justify-content、align-items等，讲解如何沿主轴和交叉轴对齐元素，帮助读者掌握一维布局模型的精髓。

flexbox

对齐可能是flexbox最令人困惑的方面。 flexbox布局模块具有一些对齐属性，这些对齐属性在不同情况下的行为会有所不同，使用它们时，您可能不一定了解正在发生的事情或原因。但是，如果您知道要注意什么，对齐就不会像第一次出现那样简单。本教程将帮助您完美地了解flexbox的对齐方式。

两个斧头的故事

当使用flexbox时，我们使用两个轴：主轴和交叉轴。顾名思义，这些轴形成层次关系，主轴优于交叉轴。

这种层次关系构成了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>

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

1.从左到右：行

如前所述，默认的flex方向是row ；如果您没有其他设置，则将使用该值。如您在下面看到的，我只向flex容器添加了与flexbox相关的属性。弹性物品具有一些装饰性的特性：

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

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

2.从右到左：行反向

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

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

如果查看弹性项目的编号，现在可以看到，每行从右到左编号，但是这些项目仍然垂直向下包裹。

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

3.从上到下：列

当flex-direction设置为column ，主轴和横轴会更改其位置。主轴将垂直运行（从上到下），而交叉轴将水平运行（从左到右）。

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

现在，您将看到弹性项目的编号不跟随行，而是列。这是flexbox的一维性质最明显的地方。仅当容器具有固定的高度时，这些物品才会包裹。

4.从下到上：列反转

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

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

如下所示，弹性项目的编号从左下方开始，向上和向右移动。

同样，要更改横轴的方向，您需要在flex-wrap属性上使用wrap-reverse 。

弹性流速记

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属性。例如，如果flex-direction是row或row-reverse ，则justify-content水平对齐项目；如果flex-direction是column或column-reverse ，则justify-content垂直对齐项目。这是柔性盒子的真正美。

沿主轴对齐

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

flex-start -flex项目朝向主轴的起点对齐（这是默认设置）
flex-end -flex项朝向主轴的末端对齐
center -弹性项目围绕主轴中心对齐
space-between从flex-start到flex-end，flex项沿着主轴均匀分布
space-around -伸缩项沿主轴均匀分布，但在两端增加了半角空格

为了正确使用justify-content ，您需要注意轴的方向。例如， justify-content: flex-start; 规则始终将弹性项目压缩到主轴的起点。当flex-direction为row ，这是左端；当row-reverse时，它是右端；当为column时，它是最高点；当为column-reverse时，是最低点。

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

沿横轴对齐

是时候将事情推向新的高度了。您可以使用三个 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 start-弹性项目朝向十字轴的起点对齐
flex-end end-弹性项目朝着交叉轴的末端对齐
center -弹性项目围绕交叉轴的中心对齐
baseline -弹性项目对齐，使其基线对齐
stretch伸缩项目沿横轴拉伸以填充伸缩容器（align-items的默认设置）

下面的笔显示了flex-direction为row时align-items和align-self属性的行为。默认情况下，横轴从顶部到底部。这些项目具有不同的填充量，以更改其高度和基线。例如，您可以看到flex-start值将项目与十字轴flex-end对齐，而flex-end则将它们与flex-end对齐。

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

多线对齐

align-content属性使沿横轴的多行对齐成为可能。它确定多行中的弹性项目如何彼此隔开。 align-content属性对单行flex容器无效（例如，内容未包装时）。它可以采用六个不同的值：

flex-start -flex项目与横轴的起点对齐
flex-end -flex项目与横轴的末端对齐
center -弹性项目围绕交叉轴的中心对齐
space-between -柔韧性项目在柔韧性起点和柔韧性终点之间沿横轴均匀分布
space-around -伸缩项沿横轴均匀分布，但在两端增加了半角空格
stretch -flex项目沿交叉轴拉伸以填充flex容器（这是默认设置）

在下面，您可以看到各种笔，它们显示align-content属性的不同值如何工作。与其他演示一样，默认轴方向也适用。

前两个示例没有定义单行属性（ align-items ），因此默认情况下您会注意到所有项目都处于拉伸状态。在下一个示例中，我们将设置align-items: flex-start; 这样，各项才能朝着十字轴的起点对齐，但是我们将设置align-content: flex-end; 以便使内容与轴的末端对齐：

如果您掌握了到目前为止我们已经了解的所有内容，那么您做得很好！您现在对Flexbox对齐有了扎实的基本了解。

结论

大功告成！回顾要记住的最重要的事情是，您需要牢记主轴和十字轴的方向。始终通过设置flex-direction属性开始对齐。要了解有关flexbox对齐的更多信息并将其投入实践，您还可以查看以下资源：

翻译自: https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-alignment--cms-30183

flexbox