order 属性仅改变视觉渲染顺序，不改变 dom 结构、可访问性或 seo 顺序；默认值为 0，建议用小整数如 -1/0/1/2；其排序方向依赖 flex-direction 主轴；需父容器设 display: flex 才生效。
order 属性为什么不能改变 DOM 顺序
order 只影响视觉渲染顺序，不改变 HTML 结构或可访问性顺序。屏幕阅读器、Tab 键导航、SEO 解析仍按原始 DOM 顺序读取。如果你需要语义化重排（比如移动端优先展示侧边栏），order 不是解决方案——得靠 HTML 重写或 ARIA aria-flowto 配合 JS 控制。
order 的默认值和数值范围怎么设才合理
所有 Flex 项目默认 order: 0。它接受任意整数（正、负、零），数值越小，排列越靠前。实际使用中建议只用小整数（如 -1、0、1、2），避免用大数（如 999 或 -100）——这会让后续维护者难以插入新顺序，也容易和未来可能的框架默认值冲突。
常见做法：
- 主内容设为
order: 0（保持默认） - 头部/导航设为
order: -1 - 页脚设为
order: 1 - 广告位等次要内容设为
order: 2
order 和 flex-direction 搭配时的易错点
order 始终按 flex 容器的主轴方向排序，和 flex-direction 强相关。比如：
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row→order决定从左到右的位置 -
flex-direction: row-reverse→order仍决定“逻辑顺序”，但渲染是从右往左，所以order: -1的元素会出现在最右边，而非最左边 -
flex-direction: column→order影响从上到下的位置
别假设 order: -1 总是“顶上”或“最左”——先确认主轴方向，再判断视觉结果。
与其他排序方式（如 CSS Grid）的区别
Flexbox 的 order 是全局排序：所有子项共用一个数字轴，相互比较。而 CSS Grid 用 grid-row / grid-column 显式定位，更精确、无耦合。如果布局中多个区域需独立控制顺序（比如侧栏内组件也要重排），Grid 更合适；若只是简单调整几个区块的视觉流（如把“推荐”模块提到“评论”前面），order 足够轻量。
注意：order 不触发重排（reflow），只影响绘制（paint），性能开销极小；但滥用会导致样式表难以追踪，尤其当多个媒体查询里反复改 order 值时。
真正容易被忽略的是：父容器必须声明 display: flex 或 display: inline-flex，否则 order 完全无效——连 devtools 都不会显示该属性。
