在 CSS Flexbox 中，order 属性用于指定 flex 容器中 flex 项的排列顺序。本文将介绍 order 属性的使用方法，以及如何使用它来控制 flex 项的先后顺序。
什么是 Flexbox？
Flexbox（Flex 布局）是一种用于页面布局的 CSS 模块，它可以使元素在容器中的布局更加灵活和自适应。Flexbox 的核心是容器和 flex 项。容器通常是一个元素，它通过设置 display: flex 或 display: inline-flex 属性来指定容器为 Flexbox 布局模式。Flex 项则是容器内的子元素，它们具有弹性，并且可以根据容器的大小动态调整宽度和高度。
order 属性的用途
在 Flexbox 中，通过 order 属性，我们可以改变容器中 flex 项的排列顺序。order 属性为每个 flex 项指定一个整数值。值越小，flex 项就会越靠前，它在视觉上就会排在容器中其他 flex 项的前面。
order 的用法
下面是 order 属性的语法：
flex-item {
order: <integer>;
}order 属性值为一个整数，其默认值为 0，数值越小表示 flex 项在容器中位置越靠前。
以下是一个简单的示例，说明如何使用 order 属性来控制 Flexbox 容器中 flex 项的排列顺序：
<div class="flex-container">
<div class="flex-item item-1">1</div>
<div class="flex-item item-2">2</div>
<div class="flex-item item-3">3</div>
</div>-- -------------------- ---- -------
--------------- -
-------- -----
---------- -----
-
---------- -
----- - - ------
------- -----
----------- -------
---------- -----
------------ -----
------ -----
-
------- -
----------------- --------
------ --
-
------- -
----------------- --------
------ --
-
------- -
----------------- --------
-上面的示例中，容器 .flex-container 设置为 Flexbox 布局，并通过 flex-wrap 属性让 flex 项自动换行。每个 flex 项（.flex-item）都设置了相同的宽度（flex: 1 1 200px）和一些样式属性，以便于演示。
三个 flex 项的背景颜色分别为红色、蓝绿色和黄色。通过为每个 flex 项指定不同的 order 值，我们可以实现不同的排列顺序。在上面的示例中，.item-1 的 order 值为 2，表示它排在第二位；.item-2 的 order 值为 1，表示它排在第一位；.item-3 没有指定 order 值，因此默认为 0，排在最后。
总结
Flexbox 的 order 属性是一种非常方便的方法，可以快速改变 flex 项在容器中的排列顺序。当我们需要调整容器中 flex 项的位置时，只需要为它们设置正确的 order 值即可。希望本文的介绍可以让大家更好地掌握 Flexbox 布局技术，在实际项目中更加灵活地运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c7553a10032fedd3912749