order属性仅影响视觉顺序，不影响dom结构和可访问性；默认值为0，数值越小越靠前，支持负数，相同值按html源序排列；必须在display:flex容器中使用，且仅对直接子元素生效。
order属性只影响视觉顺序，不影响DOM结构和可访问性
设置 order 后，元素在页面上看起来换了位置，但源码顺序、键盘 Tab 顺序、屏幕阅读器读取顺序全都不变。这是最容易被忽略的前提——如果你指望靠它来“重排表单逻辑”或“修复语义缺陷”，会踩坑。
实际使用时，order 的默认值是 0，数值越小越靠前，支持负数（如 -1）、正数（如 99），相同值按 HTML 原顺序排列。
- 别用
order替代语义化结构调整（比如把提交按钮从表单末尾移到开头） - 若需兼顾可访问性，必须同步调整 DOM 顺序，或用
aria-flowto等辅助属性补充 - 调试时可用浏览器开发者工具的“Accessibility”面板验证读取顺序是否符合预期
Flex容器必须显式声明display: flex或inline-flex
order 是 Flex 专属属性，对 display: block 或 grid 容器完全无效。常见错误是只加了 order 却忘了设父容器为 Flex。
例如：
.container {
display: flex; /* 必须有 */
}
.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 0; }
结果是 .item-c 最左，.item-b 居中，.item-a 最右（假设 flex-direction: row）。
- 不写
display: flex，order值会被浏览器忽略（DevTools 中该属性会显示为 strike-through） - 注意
display: inline-flex同样生效，但会影响容器自身行内布局行为 - 如果用了 CSS-in-JS 或预处理器，确认最终生成的 CSS 确实包含
display: flex
order与flex-direction共同决定最终流向
order 排序始终基于当前 flex-direction 的主轴方向：横向时从左到右排，纵向时从上到下排。反转方向（如 flex-direction: row-reverse）不会改变 order 值的比较逻辑，但会翻转视觉呈现。
比如两个子项：.a { order: 1; }，.b { order: 0; }：
- 当
flex-direction: row→.b在左，.a在右 - 当
flex-direction: row-reverse→.b在右，.a在左（因为主轴反向，但排序仍按order数值升序） - 当
flex-direction: column→.b在上，.a在下
这意味着不能只看 order 数值就断言“谁在谁前面”，必须结合 flex-direction 和 flex-wrap 综合判断。
移动端 Safari 旧版本对order支持不稳定
iOS 9–11 的 Safari 对 order 有渲染异常：偶发不重排、闪退或与其他 Flex 属性（如 flex-grow）冲突。虽然现在主流已无此问题，但若项目需兼容较老设备，建议加简单降级：
.item-first {
order: -1;
}
@supports not (order: -1) {
.item-first {
position: relative;
left: -100%;
}
}
- 用
@supports检测比 UA 判断更可靠 - 避免在
order上做复杂动画（如transition: order 0.3s），多数浏览器不支持该属性动画 - 服务端渲染（SSR）场景下，确保首屏 HTML 已按视觉优先级排列，以防 JS 加载前出现错乱
真实项目里，order 最常用于响应式断点切换（比如移动端把导航放顶部，桌面端挪到底部），但只要涉及语义权重变化，就得重新审视 DOM 结构本身是否合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
