order属性只改变Flex容器内子元素的视觉渲染顺序，不影响DOM结构、屏幕阅读器、Tab导航及JavaScript遍历结果；其值为整数，默认0，数值越小越靠前，负值合法，非数字值等价于0。
order 属性到底改的是什么顺序
order 属性调整的只是**视觉渲染顺序**，不影响 DOM 结构顺序、屏幕阅读器读取顺序、键盘 Tab 导航顺序，也不影响 JavaScript 中 parentNode.children 或 querySelectorAll 的遍历结果。它只作用于 Flex 容器内子元素的排列位置。
怎么用 order 改变子元素显示位置
给 Flex 子元素设置 order 值（默认为 0），数值越小越靠前，相同时按 HTML 原始顺序排列。注意：该属性只在父容器声明了 display: flex 或 display: inline-flex 时生效。
.container {
display: flex;
}
.item-a { order: 2; }
.item-b { order: -1; }
.item-c { order: 0; }
上面代码中，视觉顺序是 item-b → item-c → item-a。
- 负值合法，
order: -99比order: 0更靠前 - 非数字值（如
order: auto）等价于0 - 不支持百分比、
em等单位，只能是整数或无单位数字
order 和 DOM 顺序不一致时的隐患
当 order 打乱原有结构顺序，容易引发可访问性与交互逻辑问题：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器仍按 HTML 顺序朗读，用户听到的和看到的不一致
- Tab 键聚焦顺序默认跟随 DOM，不会随
order变化（除非额外加tabindex） - JavaScript 动态操作时（比如用
el.nextSibling查找相邻元素），拿到的仍是原始 DOM 关系 - 服务端渲染（SSR）或 SEO 场景下，搜索引擎抓取的仍是原始 HTML 顺序
替代方案：什么时候不该用 order
如果目标是语义化重排（比如响应式下把侧边栏提到主内容前面），优先考虑：
- 服务端或构建时调整 HTML 顺序（最稳妥）
- 用
flex-direction: column-reverse配合flex-wrap控制整体流向 - 媒体查询中切换不同
order值——但必须同步处理焦点、ARIA 和 JS 行为
真正需要 order 的典型场景其实很窄：仅限纯视觉微调，且确认无障碍、SEO、交互逻辑不受影响。
