CSS Flexbox 布局已经成为了现代 web 开发的常用技术之一，它可以简化前端布局的实现，使得我们可以更轻松地创建复杂的布局。而其中的 order 属性则是实现 Flexbox 布局重要的一部分。
order 属性的作用
order 属性用于指定一个 Flexbox 容器中的 Flexbox 元素的排列顺序。默认情况下，Flexbox 容器中的元素按照它们在 HTML 中出现的顺序排列。而一旦为某个 Flexbox 元素指定了一个非零的 order 属性值，则会重新根据这个值排序。
使用方法
使用 order 属性其实非常简单，只需要在对应的 Flexbox 子元素上添加 order 属性，然后将其值设置为希望该元素在 Flexbox 容器中排列的顺序即可。比如：
-- -------------------- ---- ------- ------ - ------ -- - ------ - ------ -- - ------ - ------ -- -
上述代码会使得 Flexbox 容器中的 .item2 元素排在第一位，.item1 元素排在第二位，.item3 元素排在第三位。
注意事项
需要注意的是，order 属性接受任何整数值（正数、负数）作为有效值。而且，当两个子元素的 order 值相同时，它们会按照它们在 HTML 中出现的顺序排列。
此外，当 Flexbox 容器中出现了带有 order 属性的元素时，所有未指定 order 值的元素都会被默认地视为 order 值为 0。因此，设置了 order 属性的元素会优先于那些未指定 order 属性的元素被重新排序。
示例代码
下面是一个具体的示例，通过设置 order 属性，我们可以使得 Flexbox 容器中的元素按照预期的顺序排列：
<div class="flex-container"> <div class="item one">1</div> <div class="item two">2</div> <div class="item three">3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------- ------- - --------- - ------ -- ----------------- -------- - --------- - ------ -- ----------------- -------- - ----------- - ------ -- ----------------- -------- -
在以上示例中，我们将 .item.three 的 order 属性设置为 1，将 .item.one 的 order 属性设置为 2，将 .item.two 的 order 属性设置为 3。这样，我们的元素就能按照指定的顺序排列了。
总结
order 属性是 CSS Flexbox 布局中一个重要的排列属性，它可以帮助我们轻松地改变 Flexbox 容器中子元素的排列顺序，并增加布局的灵活性。在实际应用中，我们可以通过灵活设置 order 属性的值，让元素按照我们的预期进行排列，从而达到高效的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2d3d1b5eee0b525a260de