order属性仅改变视觉顺序，不改变DOM结构、焦点流、屏幕阅读器朗读顺序及SEO；失效主因是父容器未设display:flex/inline-flex、子元素脱离文档流或非直接子元素。
直接说结论：order 属性只改视觉顺序，不碰 DOM、不改语义、不影响 tab 键焦点流——它就是为“看起来不一样，但结构和可访问性保持原样”而生的。
为什么 order 不生效？常见失效场景
最常踩的坑是：父容器没设成 Flex 容器。
-
display: flex或display: inline-flex必须加在**直接父元素**上，缺一不可 - 子元素用了
position: absolute或float，会脱离 flex 流，order失效 - 写错了选择器，比如给孙子元素设
order，但父容器只对直接子元素生效 - 浏览器兼容性没问题（Chrome 29+/Firefox 20+/Safari 9+/Edge 12+），但旧版 iOS Safari（
order 值怎么设才合理？负数、0、正数的区别
数值本身没有魔法，关键在于相对大小和语义意图。
- 默认值是
0，所有没显式设置order的子项都按 HTML 顺序排在0组里 -
order: -1比order: 0靠前，order: 1比order: 0靠后；但别用order: 999这类大数，后续加新模块时容易“插不进” - 相同
order值的元素，严格按 HTML 中的书写顺序排列，这点可用于分组控制（比如多个 banner 都设order: 0，它们之间顺序不变） - 推荐用小范围整数：-1 / 0 / 1 / 2 足够覆盖多数响应式重排需求
配合 flex-direction 使用时要注意什么？
order 总是沿主轴排序，而 flex-direction 决定主轴方向——二者逻辑独立，但视觉效果叠加。
立即学习“前端免费学习笔记（深入）”；
- 当
flex-direction: row时，order控制从左到右的顺序 - 当
flex-direction: column时，order控制从上到下的顺序 - 切换
flex-direction不会重置order值，所以同一套order在不同方向下仍有效，适合做断点布局（比如桌面端row+order: 1/2，移动端column+ 同样order） - 别指望
order能绕过flex-direction的限制——比如在column-reverse下设order: -1，它只是“在倒序主轴里更靠前”，不是“回到顶部”
真正容易被忽略的是键盘导航和屏幕阅读器——它们永远认 HTML 顺序，order 对它们完全透明。如果视觉顺序和语义顺序反差太大（比如把页脚 order: -1 提到最前），得同步用 tabindex 微调焦点流，否则可访问性就断了。
