order是Flex布局中唯一能不改变DOM结构而调整子项视觉顺序的属性，数值越小越靠前，相同值则保持DOM顺序，需配合flex容器及避免脱离文档流。
子项视觉顺序和 DOM 顺序不一致时，order 是唯一可控手段
Flex 布局中，子项默认按 DOM 顺序排列，但一旦需要跳过结构顺序做视觉重排（比如移动端把导航移到底部、广告位插在正文中间），仅靠 flex-direction 或 justify-content 无法解决。此时必须用 order——它不改变 DOM 结构，只调整渲染顺序，且支持负值、零值、正整数，数值越小越靠前。
-
order默认值是0，所有未显式设置的子项都处于同一层级 - 只要存在不同
order值，浏览器就会按数值升序重新排列（-1→0→2） - 相同
order值的子项，仍按原始 DOM 顺序排列，这点常被忽略 - 慎用大数值（如
order: 999），容易在后续维护中失去可读性
移动端优先场景下，用 order 实现“内容优先”布局
常见需求：PC 端侧边栏在右，移动端希望它出现在主内容下方。不能靠 float 或绝对定位，否则语义和可访问性受损。正确做法是在媒体查询中动态调整 order。
.container {
display: flex;
flex-direction: column;
}
.main { order: 1; }
.sidebar { order: 2; }
@media (min-width: 768px) {
.container { flex-direction: row; }
.main { order: 0; }
.sidebar { order: 1; }
}
- 注意：必须配合
flex-direction: column才能让order在竖排时生效；若保持row，则需额外控制width和换行 - 不要只改
order而忽略flex-basis或width，否则可能造成高度塌陷或溢出 - 屏幕阅读器仍按 DOM 顺序读取，所以语义结构本身要合理——
order只管视觉，不管语义
order 和 display: none 共存时的隐藏陷阱
当某个子项设置了 display: none，它会完全退出 flex 格式化上下文，order 值失效，也不会影响其他子项的排列。但开发者常误以为“隐藏后还能靠 order 占位”，结果导致视觉错位。
-
visibility: hidden不会移除元素，此时order依然参与排序，只是不可见——但会保留空白空间 - 想临时“跳过”某子项又不破坏顺序逻辑？用
flex: 0 0 auto+opacity: 0+pointer-events: none更稳妥 - JavaScript 动态增删子项时，如果依赖
order做排序，记得同步更新新元素的order值，否则它会继承默认0，可能插到错误位置
调试 order 失效的三个关键检查点
写完 order 却没变化？大概率卡在这三处：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: flex或display: inline-flex——order对非 flex 容器完全无效 - 子项被设置了
float、position: absolute或position: fixed—— 这些会让元素脱离 flex 流，order失效 - 用了 CSS 自定义属性（如
order: var(--item-order)）但变量未定义或计算为NaN，浏览器会回退到默认0，表面看“没生效”，其实是值没传进去
复杂布局里，order 很少单独使用；它真正起作用的地方，是和 flex-grow/flex-shrink 配合控制空间分配，同时维持视觉流逻辑。别把它当成“拖拽排序”的替代品——它是声明式、静态的，运行时不可交互。
