CSS Flex 布局中的 order：不改 HTML，也能优雅重排
前言
在 Flex 布局中，我们经常遇到这样的需求：
- 桌面端侧边栏在左边，移动端希望主内容显示在前面；
- 某个重要通知需要置顶；
- 某个“返回顶部”按钮需要放到最后；
- 商品卡片中，热门商品要排在前面。
如果每次都去改 HTML 结构，不仅麻烦，还可能影响 SEO、表单提交顺序和可访问性。
CSS 提供了 order 属性，让我们可以在不改变 DOM 结构的情况下，控制 flex 子项的视觉顺序。
本文将从语法、排序规则、实际案例、响应式布局、可访问性和常见问题等方面，详细介绍 order 的使用方法。
一、order 是什么？
order 用于设置 flex item 或 grid item 的排列顺序。
基本语法：
order: <integer>;
默认值：
order: 0;
特点：
- 只接受整数，例如
1、-1、10； - 不支持小数，如
1.5； - 数值越小，排列越靠前；
- 数值相同，按 HTML 中的 DOM 顺序排列；
- 支持负值；
- 只对 flex 容器或 grid 容器的直接子元素生效。
简单理解：
order 越小 → 越靠前
order 相同 → 按 HTML 顺序
二、基本示例
假设有这样一个 Flex 容器：
<div class="box">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
默认情况下，显示顺序是：
A B C
如果加上 order：
.box {
display: flex;
gap: 12px;
}
.a { order: 2; }
.b { order: 1; }
.c { order: 3; }
排序过程：
| 元素 | order |
|---|---|
| A | 2 |
| B | 1 |
| C | 3 |
按 order 从小到大排列：
B A C
所以最终视觉顺序变成：
B A C
这就是 order 最核心的用法。
三、排序规则详解
order 的排序规则可以总结为两步：
- 先比较
order值； order相同的元素，按 DOM 顺序排列。
例如：
<div class="box">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>
.box {
display: flex;
}
.a { order: 1; }
.b { order: 0; }
.c { order: 1; }
.d { order: 0; }
分析：
- B、D 的
order: 0，按 DOM 顺序：B 在 D 前； - A、C 的
order: 1，按 DOM 顺序：A 在 C 前； - 整体顺序：B D A C。
最终显示：
B D A C
四、用负值实现置顶
因为默认 order 是 0，所以设置 order: -1 可以让元素排到大多数元素前面。
.notice {
order: -1;
}
示例：
<div class="list">
<div class="item">普通消息 1</div>
<div class="item notice">重要通知</div>
<div class="item">普通消息 2</div>
</div>
.list {
display: flex;
flex-direction: column;
}
.notice {
order: -1;
}
显示顺序：
重要通知
普通消息 1
普通消息 2
五、用大值实现置底
如果希望某个元素排到最后，可以给它一个较大的 order：
.back-to-top {
order: 999;
}
不过更推荐使用相对合理的值，例如：
.back-to-top {
order: 10;
}
只要比其它元素的 order 大即可。
六、与 flex-direction 的关系
order 只决定“谁先谁后”，而“前”和“后”的方向由 flex-direction 决定。
| flex-direction | 主轴起点 | order 小的位置 |
|---|---|---|
row |
左边 | 靠左 |
row-reverse |
右边 | 靠右 |
column |
顶部 | 靠上 |
column-reverse |
底部 | 靠下 |
例如：
.box {
display: flex;
flex-direction: row-reverse;
}
.a { order: 1; }
.b { order: 2; }
因为主轴起点在右边，所以 order: 1 的 A 会更靠右，B 在 A 左边。
七、响应式布局实战
order 非常适合做响应式重排。
假设桌面端布局是：
侧边栏 | 主内容
移动端希望变成：
主内容
侧边栏
HTML：
<div class="layout">
<aside class="sidebar">侧边栏</aside>
<main class="content">主内容</main>
</div>
CSS：
.layout {
display: flex;
gap: 24px;
}
/* 桌面端 */
.sidebar {
order: 1;
}
.content {
order: 2;
}
/* 移动端 */
@media (max-width: 768px) {
.layout {
flex-direction: column;
}
.sidebar {
order: 2;
}
.content {
order: 1;
}
}
这样在移动端，主内容会显示在侧边栏前面，而 HTML 结构不需要改变。
八、常见应用场景
1. 重要通知置顶
.notice {
order: -1;
}
2. 热门商品优先展示
.card.hot {
order: -1;
}
3. 售罄商品置底
.card.sold-out {
order: 999;
}
4. 移动端内容优先
@media (max-width: 768px) {
.main {
order: 1;
}
.sidebar {
order: 2;
}
}
5. 动态调整顺序
JavaScript 也可以修改：
document.querySelector('.item').style.order = '-1';
九、可访问性：不要忽视 DOM 顺序
order 只改变视觉顺序，不改变 DOM 结构。
这意味着：
- 键盘 Tab 顺序通常仍按 DOM 顺序；
- 屏幕阅读器通常仍按 DOM 顺序朗读；
- 表单提交顺序仍按 DOM；
- 复制粘贴顺序通常仍按 DOM；
- SEO 抓取通常仍按 DOM。
例如，视觉顺序是：
B A C
但 DOM 顺序仍是：
A B C
如果顺序对用户理解内容很重要，比如表单、步骤、导航，建议直接调整 HTML 结构，而不是依赖 order。
最佳实践：
保持 DOM 顺序与视觉顺序基本一致，只用
order做小范围、非关键的视觉调整。
十、常见问题排查
1. order 不生效
检查以下几点：
- 父元素是否设置了
display: flex或display: grid？ - 设置
order的元素是否是直接子元素？ - 选择器是否正确？
- 是否有其它样式覆盖了
order？ - 值是否是整数？
order: 1.5无效。 - 元素是否是绝对定位？绝对定位元素通常不参与 flex 布局。
2. 为什么设置了 order: 1 还是没排到最后？
因为其它元素可能有更大的 order，或者默认 order: 0。
只有比其它元素大，才会排到后面。
3. 相同 order 怎么排？
按 DOM 顺序排列。
4. order 和 z-index 一样吗？
不一样。
order 控制排列顺序，z-index 控制层叠顺序。
十一、与 Grid 的关系
order 也适用于 Grid 布局中的 grid item：
.grid {
display: grid;
}
.item {
order: 2;
}
排序规则和 Flex 类似：先按 order，再按 DOM 顺序。
十二、浏览器兼容性
order 在现代浏览器中支持良好：
- Chrome
- Firefox
- Safari
- Edge
- Opera
IE10 / IE11 对 Flex 布局支持不完整，旧版本可能需要 -ms-flex-order，但现代项目通常无需考虑。
十三、最佳实践总结
order越小越靠前，默认值是0。order相同，按 DOM 顺序排列。- 用
-1实现置顶，用较大的值实现置底。 - 响应式布局中，可以用
order调整移动端显示顺序。 order只改变视觉顺序，不改变 DOM 结构。- 不要用
order替代合理的 HTML 结构。 - 对可访问性要求高的内容，谨慎使用
order。 order也适用于 Grid 布局。
结语
order 是 Flex 布局中非常实用的一个属性。它让我们可以在不修改 HTML 的情况下，灵活调整元素的视觉顺序，尤其适合响应式布局、置顶置底、内容优先级调整等场景。
但也要记住：它改变的是视觉顺序，不是 DOM 顺序。
合理使用 order，可以让布局更灵活；滥用 order，则可能带来可访问性和维护性问题。
掌握 order，你的 Flex 布局能力会更上一层楼。
浙公网安备 33010602011771号