order属性仅改变视觉顺序，不影响DOM结构、键盘导航、屏幕阅读器朗读及SEO；必须在flex容器中使用，且需重构HTML才能真正改变语义顺序。
order属性只影响视觉顺序，不影响DOM结构和可访问性
设置 order 后元素在页面上看起来“换位”了，但源码里还是原来的位置。这对屏幕阅读器、SEO、键盘 Tab 导航都有直接影响——它们依然按 HTML 顺序读取。比如你把 <button> 用 order: -1 挪到最前面，键盘用户 tab 还是从原位置开始，容易误操作。
常见错误现象：
– 页面看起来排好了，但用键盘 tab 测试时焦点跳转混乱
– 屏幕阅读器朗读顺序和视觉不一致，被投诉无障碍不达标
– 某些旧版 Safari（iOS 12 及更早）对 order 的渲染有微小偏移
- 如果需要真正改变交互/语义顺序，优先重构 HTML，而不是靠
order - 仅在视觉分组、响应式断点重排等纯展示场景下使用
order - 配合
aria-order无意义——这个属性根本不存在，别加
order的默认值是0，负数比正数靠前
order 是整数，没有单位。所有 Flex 子项默认 order: 0；数值越小，排列越靠前。不是“越大越靠前”，这点常被记反。
使用场景举例：移动端把导航栏从页脚提到顶部，PC端恢复原位
立即学习“前端免费学习笔记（深入）”；
.nav { order: -1; }
.content { order: 0; }
.footer { order: 1; }
@media (min-width: 768px) {
.nav { order: 0; }
.footer { order: 2; }
}
- 不要用小数或字符串，
order: "1"或order: 1.5会被忽略 - 相同
order值的元素，按 HTML 出现顺序排列（即文档流顺序） - 性能上无明显开销，但过度依赖
order会让 CSS 和 HTML 意图脱节，后期维护成本上升
order必须在flex容器内生效，且不能跨层级作用
父元素没设 display: flex 或 display: inline-flex，order 完全无效。它也不是继承属性，子元素的子元素不会受父级 order 影响。
常见错误现象：
– 给子元素设了 order，但没给父元素加 display: flex，样式毫无反应
– 在嵌套 Flex 容器中，误以为外层 order 能控制内层子项顺序
- 检查父容器是否已声明
display: flex（注意：display: grid不支持order） - Flex 容器必须是直接父级；中间隔了一层
div就失效 - IE10–11 支持
order，但需加-ms-前缀：-ms-flex-order
与其他Flex属性组合时的优先级关系
order 的排序发生在 flex-direction 确定的主轴方向上，但它不参与 justify-content 或 align-items 的计算逻辑。换句话说：先按 order 排好队，再按 justify-content 分配剩余空间。
容易踩的坑：
– 把 order 和 flex-grow 混用，误以为高 order 值能“抢占更多空间”（其实无关）
– 在 flex-wrap: wrap 场景下，order 只在当前行内起作用，跨行不连续
-
order不影响flex-basis或flex-shrink的行为 - 若同时用
row-reverse，order的“靠前”含义会翻转（即数值大的反而视觉上更左/更上） - 动画
order是可行的，但浏览器重排开销略高，简单切换建议用 class 切换而非 JS 动态改值
order 最适合做响应式微调，比如把侧边栏从右侧挪到内容上方。一旦涉及表单流、导航链路、或 SEO 关键区块，就该老老实实改 HTML 顺序——CSS 不该替语义背锅。 
