Flexbox 已经成为前端开发中不可或缺的一部分之一。但是，您是否知道如何使用 order 属性来控制 Flexbox 中的项目清单呢？在本文中，我们将深入探讨 order 属性并了解它的作用。
什么是 order 属性？
在 Flexbox 中，order 属性定义了项目在 Flexbox 容器中的顺序。默认情况下，项目的顺序是根据它们在 HTML 标记中的顺序确定的。
order 属性是一个整数，其默认值为 0。较小的数字表示项目应该更靠近 Flexbox 容器的开头，而较大的数字表示项目应该更靠近 Flexbox 容器的末尾。
order 属性的语法
order 属性语法非常简单。您只需要在 CSS 中为每个项目定义一个 order 属性，然后为其分配一个无符号整数值即可。
-- -------------------- ---- ------- ------ - ------ -- - ------ - ------ -- - ------ - ------ -- -
在上面的示例代码中，我们定义了三个项目，并使用 order 属性为它们分配了不同的顺序值。
order 属性的作用
order 属性对 Flexbox 中的项目顺序非常有用。以下是 order 属性的一些示例应用：
1. 改变项目顺序
如果您不喜欢项目在默认顺序中出现的顺序，您可以使用 order 属性轻松更改它们的位置。
-- -------------------- ---- ------- ------ - ------ -- - ------ - ------ -- - ------ - ------ -- -
在上面的代码片段中，我们为项目指定了一个不同的顺序。这将使项目顺序完全改变。
2. 溢出项目的顺序
有时，项目可能会在 Flexbox 容器中过多。在这种情况下，您可以使用 order 属性将某些项目推到容器的侧面。
-- -------------------- ---- ------- ------ - ------ -- - ------ - ------ -- - ------ - ------ --- -
在上面的代码片段中，我们为第三个项目分配了负的 order 值。它将导致该项目从标准项目流中移出并被推到 Flexbox 容器的侧面。
3. 控制项目堆叠顺序
有时候，项目可能会互相重叠。这时候，您可能会想要指定项目的层叠顺序。在这种情况下，order 属性可以帮助您控制项目堆叠的顺序。
.item1 {
order: 1;
}
.item2 {
order: 2;
z-index: 100;
}在上面的代码片段中，我们为第二个项目指定了 z-index 值。这将使该项目位于第一个项目之上，在层叠顺序方面具有更高的重要性。
总结
Flexbox 中的 order 属性允许您轻松控制项目的顺序。通过为项目分配数字值，您可以改变它们出现在 Flexbox 容器中的顺序，并控制它们在容器中的布局。虽然这个属性的用处非常简单，但在使用时我们需要注意代码的合理性和美观性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64525a32968c7c53b06fa38c