Flexbox 布局是一种全新的布局方式，能够很好地解决传统布局的一些问题，因此受到了越来越多前端工程师的关注和使用。其中，order 属性是其布局中的一项重要功能，它能够控制弹性盒子中子元素的排序。本文将详细讲解 order 属性的用法及其指导意义。
order 属性的语法
order 属性用于设置元素的排序规则，应用于弹性盒子中的子元素。其语法为：
----- - ------ ---------- -
其中，<integer> 表示整数值，值越小越优先，默认值为 0，表示与其他同 level 的弹性盒子按照文档流顺序排序。
order 属性的作用
在弹性布局中，子元素的位置是可以调换的，order 属性就是用于控制这种调换的规则。通过设置 order 属性，我们可以按照一定的规则排序，从而使页面的排版更加合理和美观。
例如，我们可以调整两个元素的 order 属性，将其位置互换：
------ - ------ -- - ------ - ------ -- -
其中，.item1 元素在文档流中的位置比 .item2 元素靠后，但由于 .item1 的 order 值更小，所以它会在 .item2 前面显示。
order 属性的实际应用
调整元素的排序
order 属性最基础的应用就是调整元素的排序，如下例所示：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- - ----- - ----- - ------------ ----- - ------------------ - ------ -- - ------------------ - ------ -- - ------------------ - ------ -- ------ ---- - ------------------ - ------ -- - ------------------ - ------ -- -
该样例中，我们使用 order 属性将元素的顺序进行了调整，将第三个元素放到了最前面，并改变了颜色。
水平居中
在布局中，水平居中是一项常见的需求。使用 order 属性可以将元素的位置调换，从而实现水平居中的需求。
例如，我们可以将最中间的元素的 order 值设置为 1，即可实现水平居中：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- - ----- - ----- - ------------ ----- - ------------------ - ------ -- -
响应式布局
order 属性还可以用于响应式布局，通过在不同的媒体查询中修改元素的 order 值，可以实现响应式的布局效果。例如：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- -
-------- -----
---------- -----
-
----- -
------ --------- - - - ------
------- ------
------------- -----
-------------- -----
-
------------------ -
------ --
-
------------------ -
------ --
-
------------------ -
------ --
-
------ ------ --- ----------- ------ -
------------------ -
------ --
-
------------------ -
------ --
-
------------------ -
------ --
-
-该样例中，我们使用 order 属性在不同的媒体查询中重新排列了元素的位置，从而适应不同的屏幕尺寸。
总结
order 属性是 Flexbox 布局中的一项重要功能，能够很好地控制元素的位置和排序，从而使页面的排版更加合理和美观。在实际开发中，我们可以灵活地运用该属性，实现各种布局效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f84c85f6b2d6eab306ab25