order属性仅在display: flex或inline-flex父容器中生效，数值越小越靠前；默认值为0，相同时按html源顺序排列；不改变dom结构，需兼顾可访问性。
直接给子元素设 order 值，数值越小越靠前；但前提是父容器必须是 display: flex 或 inline-flex，否则 order 完全不生效。
确保父容器启用 Flex 上下文
order 只在弹性容器中起作用。常见错误是只给子项写 order: -1，却忘了给父级加 display: flex。DevTools 的“Computed”面板里如果压根不显示 order 属性，基本就是这个原因。
- 父容器不能是
display: grid、block或contents—— 这些上下文中 order 无效 - 子元素不能脱离文档流，比如加了
position: absolute或float，它就不再是 Flex 项目，order 失去作用对象 - order 只对**直接子元素**有效，孙子节点、伪元素（
::before）等都不支持
设置合理的 order 数值
order 默认值是 0，不是 1 或 auto。所有没显式设值的子项都按 0 排序，数值相同时严格按 HTML 源顺序排列。
- 推荐用小整数：-1、0、1、2，留出余地便于后续插入新项
- 避免用极大绝对值（如
order: 999或order: -999），iOS Safari 对极小负值渲染不稳定 - 两个元素都设
order: 5？它们之间顺序不变，谁在 HTML 里先写，谁就排前面
响应式中切换顺序要同步逻辑
移动端和桌面端交换主次区域，不是简单改一个值就完事。得明确每个断点下各区块的相对优先级。
- 典型写法：移动端内容优先，侧边栏后置；桌面端侧边栏左置，内容居中
- HTML 保持语义化顺序（比如
<main></main>在前、<aside></aside>在后），CSS 控制视觉顺序 - 别用
flex-direction: row-reverse实现翻转——它会镜像文字流，影响表单焦点和 RTL 布局
注意可访问性与 DOM 一致性
order 只改变视觉顺序，不改变 DOM 结构、JavaScript 遍历顺序、屏幕阅读器读取顺序和键盘 Tab 焦点流。
- 如果重排是为了逻辑优先级（比如把“跳过导航”链接提前），建议同步调整 HTML 结构
- 若仅为视觉优化（如移动端换序），需确保信息流依然合理，Tab 键顺序符合用户预期
- 不要仅靠 order 把重要内容“藏”到末尾再提上来，这容易造成可访问性断裂
