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