order属性仅在flex容器中对直系子元素生效，不改变DOM顺序、焦点流、屏幕阅读器朗读及SEO；失效主因是父容器未设display:flex/inline-flex，或元素脱离文档流、非直系子元素、误用于Grid布局。
order 属性能改视觉顺序，但只在 display: flex 或 display: inline-flex 容器里生效，且只对直系子元素起作用；它不改变 DOM 顺序、Tab 焦点流、屏幕阅读器朗读顺序或 SEO。
为什么写了 order 却完全没反应
这不是值写错了，而是布局前提根本没成立：
- 父容器漏了
display: flex（或inline-flex）——浏览器直接忽略order，DevTools 里该属性会灰掉 - 目标元素不是 Flex 容器的直接子元素，中间嵌了
<div>wrapper，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 抓取逻辑。JavaScript 里用 el.nextSibling 或 parentNode.children 拿到的仍是源顺序，不是视觉顺序。语义和视觉错位越深，后期补无障碍、做 SSR、接自动化测试时踩的坑就越隐蔽。
