在前端开发中，CSS Flexbox 已经成为了排版布局的主要方式之一。它可以帮助我们快速而灵活地操纵元素的位置和大小，使得设计师的创意能够更加容易地实现到页面上。而在 Flexbox 中，order 属性则是一种非常有用的特性，它可以让我们通过改变元素的 order 值来实现元素的排序。下文将详细介绍 order 属性的使用方法，并提供一些示例代码帮助大家更好地理解。
order 属性的基本用法
在 Flexbox 中，每个元素都有默认的 order 值为 0。通过给元素指定一个 order 值，我们就可以改变这个元素在 Flex 容器中的顺序。order 值可以是任何整数，而元素的顺序将按照 order 值从小到大排序。如果两个元素的 order 值相同时，则它们的顺序将按照它们在 HTML 中的出现顺序排序。
下面是一些示例代码：
<div class="container"> <div class="item">1</div> <div class="item" style="order: 3;">3</div> <div class="item" style="order: 2;">2</div> <div class="item">4</div> </div>
上面的代码中，我们有一个 Flex 容器和四个子元素。其中，第一个元素的 order 值为默认值 0，第二个元素的 order 值为 3，第三个元素的 order 值为 2，第四个元素的 order 值为默认值 0。因此，它们在页面中的实际顺序为 1、4、2、3。
order 属性的实际应用
除了简单的元素排序以外，order 属性还可以用于更复杂的布局设计。下面介绍一些实际的应用场景。
1. 灵活地调整元素顺序
当开发人员需要在不改变 HTML 结构的情况下改变页面中元素的顺序时，order 属性就非常有用了。比如，我们需要在移动端的页面中将导航栏排在主体内容下方，在桌面端则将导航栏排在主体内容左侧。这时，我们可以通过改变元素的 order 值来实现这一目标。
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-
--- -
------ --
-
-------- -
------ --
-
------ ----------- ------ -
--- -
------ --
------ ----
------------- -----
-
-------- -
------ --
------ ----
-
-上面的代码中，我们使用了媒体查询来判断页面的宽度，从而改变元素的 order 值。在移动端时，导航栏的 order 值为 2，内容区的 order 值为 1，导航栏会被放在内容区的下方；在桌面端时，导航栏的 order 值为 1，内容区的 order 值为 2，导航栏会被放在内容区的左侧。
2. 响应式布局
在响应式布局中，我们需要根据屏幕宽度和设备类型等因素来灵活地设置页面布局，以适应各种不同的浏览环境。而 order 属性可以帮助我们在不同的布局情况下，灵活地调整元素的位置和大小。
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-
----- -
------ -----
-
------ ----------- ------ -
---------- -
---------- -------
-
-------- -
------ --
------ ------
-
-------- -
------ --
----- --
-
-上面的代码中，我们使用 flex-wrap 属性为容器设置了换行布局，并通过媒体查询来判断页面宽度是否大于 768px。在移动端时，每个子元素的宽度均为 100%；在桌面端时，侧边栏的 order 值为 1，内容区的 order 值为 2，容器不再换行，侧边栏的宽度为 200px，内容区的 flex 值为 1，以填满剩余的宽度。
总结
order 属性是 CSS Flexbox 中一个非常有用的特性，它可以帮助开发人员轻松地调整元素的顺序，并实现复杂的布局设计。本文介绍了 order 属性的基本用法和实际应用场景，并提供了示例代码。希望这篇文章可以帮助大家更好地理解 Flexbox，并在实际的开发中灵活运用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650040b795b1f8cacde70d68