如何在 Flexbox 布局中设置元素的排列顺序？

Flexbox 是一种强大的 CSS 布局模型，它可以解决许多布局问题。Flexbox 允许我们轻松改变排列顺序，甚至在不改变 HTML 代码结构的情况下。在这篇文章中，我们将学习如何在 Flexbox 布局中设置元素的排列顺序。

为什么需要设置元素的排列顺序？

在某些情况下，我们需要改变一个页面上的元素排列顺序。例如，我们可能需要在移动设备上反转一个菜单，以使它更容易阅读。此外，我们可能需要更改元素的排列方式，以便不同屏幕尺寸下更好地呈现。

在传统的 CSS 布局中，这可能需要使用 JavaScript 或额外的 HTML 页面来实现。但是，在使用 Flexbox 布局时，我们可以使用 CSS 属性轻松地实现这一点。

如何使用 flex-direction 属性？

在 Flexbox 布局中，我们使用 flex-direction 属性来指定元素的排列方向。默认情况下，元素按照其在源代码中的顺序排列，但是我们可以使用 flex-direction 属性来更改它们的顺序。

flex-direction 属性有四个值：

• row，水平排列，从左到右（默认值）。
• row-reverse，水平排列，从右到左。
• column，垂直排列，从上到下。
• column-reverse，垂直排列，从下到上。

在下面的示例中，我们将使用 flex-direction 属性从左到右和从右到左更改元素的排列顺序。

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #0074d9;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.box1 {
  order: 1;
}

.box2 {
  order: 2;
}

.box3 {
  order: 3;
}

/* 水平排列，从左到右 */
.container:first-of-type {
  flex-direction: row;
}

/* 水平排列，从右到左 */
.container:last-of-type {
  flex-direction: row-reverse;
}

在上面的代码中，我们使用 order 属性来指定元素的顺序。默认情况下，每个元素的 order 值为 0，但可以更改为正整数、负整数，以及任何小数。这意味着我们可以将元素按照自己的意愿排列。

在 .container:first-of-type 中，我们将 flex-direction 属性设置为默认值 row，因此元素按照其在 HTML 页面中的顺序排列。在 .container:last-of-type 中，我们将其更改为 row-reverse，因此元素将按照从右到左的顺序排列。

你可以在 CodePen 中查看示例代码的运行效果 - Flexbox 顺序变化示例。

总结

通过使用 flex-direction 属性，在 Flexbox 布局中，我们可以轻松设置元素的排列顺序。这使得我们在多种情况下都可以达到所需要的排列方式。掌握这些技巧将使我们的 Web 开发更加高效和灵活。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3cd08add4f0e0ffbf747e