box和flexbox
flexbox布局模块允许我们按任意顺序和方向对flex项目进行布局。 实际上,Flexbox排序比使用浮点数或CSS网格排序更容易,即使您一开始可能并不这么认为。 由于flexbox是一维布局模型,而CSS网格是二维的,因此您只需要注意一个方向即可。 W3C也清楚地定义了规则,因此您不必处理通常的float和clearfixes混乱。
通过阅读本指南,您将学习如何使用以下flexbox属性进行订购:
-
flex-direction
-
flex-wrap
-
flex-flow
-
order
重新排序
在谈论flexbox订购时,我们需要弄清楚订购和重新 订购之间的区别。
什么是订购?
设置flexbox布局时,我们首先需要定义源顺序 ,这意味着我们必须确定flex容器的轴的位置。 我在有关flexbox对齐的指南中详细介绍了flexbox轴的工作方式 。
简而言之,每个伸缩容器都有两个轴:主轴和交叉轴。 主轴将具有四个方向之一,而交叉轴将始终垂直于该方向:
- 左到右
- 右到左
- 从上到下
- 从下到上
我们使用flex-direction
属性设置主轴,然后使用flex-wrap
属性决定如何包装flex项目。 这两个属性确定浏览器如何布置flex容器中的项目。
那么什么是重新排序?
Flexbox还允许我们在order
属性的帮助下操纵默认的源订单,有效地重新排序 。 重新排序意味着我们更改了项目的视觉呈现,而源订单保持不变。
如果我们使用flexbox的重新排序功能,则不必为了视觉呈现而更改HTML文档结构。 因此,屏幕阅读器用户(和搜索引擎)可以以逻辑结构的方式获取内容(例如,侧边栏不会优先于主要内容)。
Flexbox订购
Flexbox排序通过flex-direction和flex-wrap属性进行。 Flex-direction
指定主轴的方向。 它可以采用以下值:
-
row
(默认)主轴:从左到右 -
row-reverse
主轴:从右到左 -
column
主轴:从上到下 -
column-reverse
主轴:从下到上
Flex-wrap
定义弹性项目是布置在单行中还是换行到多行。 它还控制横轴的方向。 它可以具有三个值:
-
nowrap
(默认)将弹性项目布置在一行中; 十字轴位于默认位置 -
wrap
将弹性项目布置成多行; 十字轴位于默认位置 -
wrap-reverse
将弹性项目布置成多行; 十字轴反转
十字轴的默认位置是:
- 从上到下(如果
row
和row-reverse
- 从左到右(如果
column
和column-reverse
在上一篇有关flexbox对齐的文章中,您可以找到四个详细示例(包含演示),这些示例有关如何使用flex-direction
在四个不同方向上设置主轴。 然而,在讨论Flexbox的订货的时候,我想知道如何使用它更重要的flex-direction
和flex-wrap
特性, 共同实现我们正在寻找源顺序。
快速代码示例
我们将使用一个简单的代码示例来查看flexbox的排序方式。 这里HTML仅包含几个div:
<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项。 在所有示例中,我们将(几乎)使用相同CSS,只是flex-direction
和flex-wrap
属性将发生变化。 这是CSS的row
和wrap
值的外观:
html {
background: #fff7f6;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
font-size: 2rem;
line-height: 1;
text-align: center;
padding: 3rem;
background: mistyrose;
border: 3px solid tomato;
color: tomato;
margin: 6px;
}
这是CodePen演示中的相同示例:
Row
和Column
排序
现在,我们已经达到了真正有趣的部分! 从理论上理解flexbox的排序并不难,但是在实践中使用它肯定是一个挑战。 发生这种情况是因为很难看到 flex-direction
和flex-wrap
不同变化之间的比较。
在下面的嵌入式笔中,您可以看到flex-direction: row
和flex-direction: column
布局如何与flex-wrap
属性的不同值一起使用。 使用表单控件查看不同的组合。
如您所见,当flex-direction
为row
,flex项从左到右水平放置。 当我们使用wrap-reverse
而不是wrap
,flexbox从底部开始而不是从顶部开始布局项目。 发生这种情况是因为wrap-reverse
回使横轴的方向wrap-reverse
。
当flex-direction
为column
,项目从上到下垂直布置。 而且,当我们使用wrap-reverse
而不是wrap
,flexbox从右侧 (现在是交叉轴的起点)开始而不是从左侧开始布置项目。
row-reverse
和column-reverse
排序
现在,让我们看一下当flex-direction为row-reverse
和column-reverse
时,flexbox如何布置项目。
正如您在上面的演示中所看到的,在两种情况下,flexbox都像以前一样从主轴的起点开始布局项目。 row-reverse
布局的主轴从右到左 ,因此flexbox开始从右开始布局项目。 并且, column-reverse
布局的主轴从底部到顶部 ,因此项目开始从flex容器的底部开始流动。
当我们使用flex-wrap: wrap
,当flex-direction
为row-reverse
时,flexbox从顶部开始包装项目;而当column-reverse
为flex-direction
row-reverse
,则从左侧开始包装项目,因为这是各自情况下交叉轴的起点。
当我们将包装方向翻转为flex-wrap: wrap-reverse
,交叉轴将沿相反方向运行。 当flex-direction
为row-reverse
时,它将从底部指向顶部 ,而当column-reverse
时,它将从右指向左 。
使用flex-flow
速记加快速度
CSS对于flex-direction
和flex-wrap
属性也有一个很酷的缩写。 这称为flex-flow 。 要使用它,我们需要按以下方式依次列出两个属性:
.container-1 {
flex-flow: row wrap;
}
.container-2 {
flex-flow: column-reverse wrap-reverse;
}
Flexbox重新排序
现在该换个角度来看待事物了。
order属性更改了我们使用flex-direction
和flex-flow
定义的flex项目的默认排序。 它仅影响项目的视觉呈现,因此不影响屏幕阅读器和其他非CSS用户代理读取源代码的方式。
与前面提到的属性相反,我们在flex 项目上使用order
,而不是flex 容器 。 它可以采用任何整数值,并且其默认值为0。
下面的示例将.item-3
移动到主轴的起点。 由于所有项目的默认值均为0,因此足以使用order: -1
规则使其成为容器中的第一项:
.item-3 {
order: -1;
}
您会注意到,我们可以使用相同的逻辑将.item-3
移动到主轴的末端。 我们只需要为其定义一个正order
值。
当然,我们可以根据需要对任意数量的弹性项目进行重新排序(尽管请记住,对所有内容进行重新排序可能不是有史以来最易访问的决定)。 不同弹性项目的order
属性始终彼此相对。 在下面,您可以看到如何在flex容器中重新排序多个项目。
.item-3 {
order: -1;
}
.item-4 {
order: -2;
}
.item-5 {
order: 2;
}
.item-7 {
order: 1;
}
订购和可及性
要了解所有这一切,最重要的一点是order
属性不会影响绘画,语音和顺序导航顺序。 这意味着当我们修改弹性商品的顺序时,非视觉媒体的用户将不会体验到这些更改。 例如,依靠键盘导航的人们仍将按原始源顺序在链接中移动。
在某些情况下,这种flexbox行为可能会派上用场。 例如,可以通过Flexbox订购来访问所谓的“圣杯布局”。 Holy Grail布局是流行的博客布局,具有页眉,页脚和两个侧边栏:一个在主内容的左侧,一个在右侧。
在这种布局中,我们通常将左侧边栏放在HTML代码中的主要内容之前 。 但是,从可访问性的角度来看,辅助技术的用户应该首先遇到主要内容。 Flexbox非常适合此功能。 我们可以将主要内容放置在标记中的两个侧边栏之前。 然后,我们只需要使用order
属性将侧边栏和主要内容放置在正确的位置:
.sidebar-left {
order: 1;
}
article {
order: 2;
}
.sidebar-right {
order: 3;
}
弹性框和书写模式
本教程中所说的所有内容都适用于LTR(从左到右)写入模式。 Flexbox轴实际上遵循文档的书写方向,可以使用direction和writer -mode属性进行设置。 这就是为什么在LTR写入模式下,当flex-direction
为row
时,主轴从左到右运行。 在RTL写入模式下,它以相反的方向(从右到左)运行,其他所有内容都发生相应的变化。
那是(Flex)包!
本教程是我的flexbox系列的第二部分。 确保阅读了关于flexbox对齐的第一部分,以了解如何沿主轴和横轴对齐flex项目。 如果您想了解有关Flexbox订购的更多信息,MDN上也有关于该主题的非常有用的文章 。
学到更多
box和flexbox