Flexbox 排序和重新排序的综合指南

flexbox 布局模块允许我们以任何顺序和方向布局弹性项目。事实上，Flexbox 排序比使用浮点数或 css 网格排序更容易，即使您一开始可能不这么认为。

由于 flexbox 是一维布局模型，相对于 CSS 网格是二维的，你只需要关注一个方向。这些规则也由 W3C 明确定义，因此您不必处理通常的浮动和 clearfixes 混乱。

通过遵循本指南，您将了解如何使用以下 flexbox 属性进行排序：

flex-direction
flex-wrap
flex-flow
order

订购与。重新排序

在谈到 flexbox 排序时，我们需要明确ordering和reordering之间的区别。

什么是订购？

当我们设置一个 flexbox 布局时，我们首先需要定义源顺序，这意味着我们必须决定 flex 容器的轴是如何定位的。我在关于 flexbox 对齐的指南中详细介绍了 flexbox 轴的工作原理。

简而言之，每个 flex 容器都有两个轴：主轴和交叉轴。主轴将具有四个方向之一，而交叉轴将始终垂直于该方向：

左到右
右到左
从上到下
从下到上

我们使用该属性设置主轴flex-direction，然后使用该属性决定弹性项目将如何包装 flex-wrap 。这两个属性决定了浏览器将如何布置 flex 容器中的项目。

那么什么是重新排序？

Flexbox 还允许我们在属性的帮助下操纵默认的源顺序，有效地重新排序。order重新排序意味着我们更改项目的视觉呈现，而源订单保持不变。

如果我们使用 flexbox 的重新排序功能，我们不必仅仅为了视觉呈现而改变 html 文档结构。因此，屏幕阅读器用户（和搜索引擎）可以以逻辑结构化的方式获取内容（例如，侧边栏不会优先于主要内容）。

弹性盒订购

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>

.containerdiv 将是 flex 容器，带有类的 div 将.item 是 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 演示中的相同示例：

See the Pen Flexbox Ordering (row, wrap) by Envato Tuts+ (@tutsplus) on CodePen.

订购Row和Column

现在，我们已经到了真正有趣的部分！理论上理解 flexbox 排序并不难，但在实践中使用它肯定是一个挑战。发生这种情况是因为很难看出它们之间的不同变化flex-direction和flex-wrap相互比较。

在下面的嵌入式笔中，您可以看到 flex-direction: row和flex-direction: column 布局如何与不同的 flex-wrap属性值一起工作。使用表单控件查看不同的组合。

See the Pen Flexbox Ordering (dynamic) by Envato Tuts+ (@tutsplus) on CodePen.

如您所见，当flex-directionis时row，弹性项目从左到右水平布局。当我们使用wrap-reverseinstead of 时，flexbox 会从底部wrap开始布局项目，而不是从顶部开始。发生这种情况是因为反转了交叉轴的方向。wrap-reverse

当flex-direction是时column，项目从上到下垂直排列。而且，当我们使用wrap-reverseinstead 时，flexbox 会从右侧wrap开始布局项目（现在这是横轴的起点），而不是从左侧开始。

订购row-reverse和column-reverse

现在，让我们看看当 flex-direction 为 row-reverse和时，flexbox 是如何布置项目的column-reverse。

See the Pen Flexbox Ordering (dynamic reverse) by Envato Tuts+ (@tutsplus) on CodePen.

正如您在上面的演示中所看到的，在这两种情况下，flexbox 都从主轴开始布置项目，就像以前一样。row-reverse布局的主轴从右到左运行，因此 flexbox 开始从右侧开始布局项目。而且，布局的主轴是column-reverse从底部到顶部，所以项目从弹性容器的底部开始流动。

当我们使用时，flexbox 在 is 时从顶部flex-wrap: wrap开始包装项目，在is 时从左侧开始包装项目，因为这些是各自情况下交叉轴的起点。flex-directionrow-reversecolumn-reverse

当我们将环绕方向翻转为时flex-wrap: wrap-reverse，交叉轴将沿相反方向运行。当is时它会从下到上指向，当它是时它会从右到左。flex-directionrow-reversecolumn-reverse

flex-flow用速记加快速度

CSS 还为flex-directionandflex-wrap属性提供了一个很酷的简写。它被称为flex-flow。要使用它，我们需要按以下方式依次列出这两个属性：

.container-1 {
flex-flow: row wrap;
}
.container-2 {
flex-flow: column-reverse wrap-reverse;
}

弹性盒重新排序

是时候以不同的方式看待事物了。

order属性改变了我们用flex-direction 和定义的弹性项目的默认顺序flex-flow。它只影响项目的视觉呈现，因此不会影响屏幕阅读器和其他非 CSS 用户代理读取源代码的方式。

与之前提到的属性相反，我们order在 flex items上使用，而不是 flex container。它可以取任何整数值，默认值为 0。

以下示例移动.item-3到主轴的起点。由于所有项目的默认值都为 0，因此使用order: -1规则使其成为容器中的第一项就足够了：

.item-3 {
order: -1;
}

See the Pen Flexbox Reordering (dynamic) by Envato Tuts+ (@tutsplus) on CodePen.

您会注意到我们可以使用相同的逻辑移动.item-3到主轴的末端。我们只需要order为它定义一个正值。

当然，我们可以根据需要对这些弹性项目进行重新排序（尽管请记住，重新排序所有内容可能不是有史以来对可访问性最友好的决定）。不同弹性项目的order属性总是相互关联的。下面，您可以看到如何在 flex 容器中重新排序多个项目。

.item-3 {
  order: -1;
}
.item-4 {
  order: -2;
}
.item-5 {
  order: 2;
}
.item-7 {
  order: 1;
}

See the Pen Flexbox Reordering Multiple Items (dynamic) by Envato Tuts+ (@tutsplus) on CodePen.

订购和可访问性

了解这一切的最重要的一点是该 order属性不会影响绘画、语音和顺序导航顺序。这意味着当我们修改弹性项目的顺序时，非视觉媒体的用户不会体验到这些变化。例如，依赖键盘导航的人仍然会按照原始源顺序浏览链接。

这种 flexbox 行为在某些情况下会派上用场。例如，可以在 flexbox 排序的帮助下实现所谓的“圣杯布局”。圣杯布局是流行的博客布局，带有页眉、页脚和两个侧边栏：一个在左侧，一个在主要内容的右侧。

在这种布局中，我们通常将左侧边栏放在 HTML 代码中的主要内容之前。但是，从可访问性的角度来看，辅助技术的用户应该首先遇到主要内容。Flexbox 非常适合这一点。我们可以将主要内容放在标记中的两个侧边栏之前。然后，我们只需要使用属性将侧边栏和主要内容放到正确的位置 order：

.sidebar-left {
  order: 1;
}
article {
  order: 2;
}
.sidebar-right {
  order: 3;
}

See the Pen Flexbox Ordering (Holy Grail) by Envato Tuts+ (@tutsplus) on CodePen.

Flexbox 和书写模式

本教程中所说的一切都适用于 LTR（从左到右）书写模式。Flexbox 轴实际上遵循文档的书写方向，可以使用direction和writing-mode属性进行设置。flex-direction这就是为什么在 LTR 写入模式下，当为时，主轴从左向右运行row。在 RTL 书写模式下，它以相反的方向运行，从右到左，其他一切都相应地发生变化。