order属性仅改变视觉顺序而不影响DOM结构，常见失效原因包括默认值均为0、父容器未设flex显示、子元素脱离flex流或预处理器变量未定义；其按升序排列，负数优先级更高，且受flex-direction主轴起点影响；语义顺序敏感场景应避免使用。
order 属性是唯一能直接改变 flex 项目视觉顺序的方式，它不改变 DOM 结构，只影响渲染顺序。用错地方或忽略默认值，很容易让布局“看起来乱了但代码没动”。
为什么 order 不生效？常见原因
多数失效不是语法错，而是被默认行为掩盖：
-
order默认值是0，所有子元素初始值相同，改一个没对比就看不出变化 - 父容器没设
display: flex或display: inline-flex，order完全被忽略 - 子元素用了
float、position: absolute或display: contents，会脱离 flex 流，order失效 - 在 CSS 预处理器里写了
order: $var但变量未定义，编译后生成无效声明（如order: ;）
order 的数值逻辑和排序规则
flex 项目按 order 值升序排列，值相同时按 DOM 顺序保留。负数合法且优先级更高：
.item-a { order: 2; }
.item-b { order: -1; }
.item-c { order: 0; }
渲染顺序为：.item-b → .item-c → .item-a。注意：order 只影响同一层 flex 子项，不影响嵌套 flex 容器内部的顺序。
立即学习“前端免费学习笔记（深入）”；
和 flex-direction 的配合要点
order 的排序方向始终基于主轴起点，和 flex-direction 强相关：
-
flex-direction: row（默认）：order小的靠左 -
flex-direction: row-reverse：order小的反而靠右（因为主轴起点变了） -
flex-direction: column：order小的靠上
别假设“小值一定在前”，要结合当前 flex-direction 判断主轴起点位置。
替代方案：什么时候不该用 order
order 是视觉重排，不改变语义顺序和可访问性顺序（如屏幕阅读器仍按 DOM 读），以下情况建议换思路：
- 需要 SEO 或无障碍支持的导航菜单：改 DOM 顺序或用 ARIA
aria-order（不推荐，支持差），不如直接调整 HTML - 响应式中仅需交换两个元素：用
flex-direction: row-reverse更轻量，避免给每个元素加order - 动画切换顺序：
order无法触发 CSS 过渡，得配合transform+opacity模拟
真正该用 order 的场景很窄：DOM 固定、纯视觉调整、且不依赖语义顺序时——比如仪表盘卡片按优先级动态置顶，或表单中错误提示浮到输入框上方。
