order属性仅在flex容器中对直系子元素生效，不改变DOM顺序、焦点流、屏幕阅读器朗读或SEO；失效主因是父容器未设display: flex/inline-flex，或元素脱离文档流。
直接说结论：order 属性能改视觉顺序，但只在 display: flex 或 display: inline-flex 容器里生效，且只对**直系子元素**起作用；它不改变 DOM 顺序、Tab 焦点流、屏幕阅读器朗读顺序或 SEO，数值越小越靠前。
为什么写了 order 却完全没反应
这不是值写错了，而是布局前提根本没成立：
- 父容器漏了
display: flex（或inline-flex）——浏览器直接忽略order，DevTools 里该属性会灰掉 - 目标元素不是 Flex 容器的**直接子元素**，中间嵌了 wrapper
<div>，order就失效 - 子元素用了
position: absolute、float、display: none或visibility: hidden——它们已脱离 Flex 流，order失去作用对象 - 误用在
display: grid容器里——grid 中控制位置得靠grid-row/grid-column，order虽然也认，但语义和性能都不如原生 grid 控制方式
order 值怎么设才不容易翻车
别把它当“绝对位置索引”，它是相对排序工具：
- 统一用小整数区间：主内容保持
order: 0（不写也行），想前置的（如移动端导航按钮）设order: -1，次要内容（如广告、边栏）设order: 1或order: 2 - 避免
order: 999或order: -100——后续加新模块时极易冲突，维护成本陡增 - 相同
order值的元素，严格按 HTML 源码顺序排列，这点常被忽略，导致“设了却没变” - 用 CSS 变量动态控制时，必须过
calc()：写成order: calc(var(--sort) + 0)，order: var(--sort)会被当作字符串回退为0
order 和 flex-direction 搭配时的视觉陷阱
order 总是沿着主轴排序，“靠前”不等于“靠左”或“靠顶”：
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row→order: -1出现在最左边 -
flex-direction: row-reverse→order: -1反而出现在最右边（主轴反向了） -
flex-direction: column→order: -1出现在最上方 - 别假设“负数一定顶上”，先看主轴方向，再推导视觉结果
真正容易被忽略的点
order 只改眼睛看到的，不改 DOM 顺序、Tab 键焦点流、屏幕阅读器朗读顺序、SEO 抓取逻辑：
- 用户用键盘 Tab 时，焦点仍按原始 HTML 顺序走，可能从标题跳到页脚，中间跳过你用
order: -1提前的按钮 - JavaScript 里用
el.nextSibling或parentNode.children拿到的仍是源顺序，不是视觉顺序 - 搜索引擎只认源码结构，把关键内容靠
order“拽”到前面，对 SEO 没用 - 语义和视觉错位越深，后期补无障碍、做 SSR、接自动化测试时踩的坑就越隐蔽
