flex-order 属性仅在 flex 容器（display: flex/inline-flex）内生效，父元素非 flex 时被忽略；order 按数值升序排列，负数合法，默认值为 0，同值时按 HTML 源顺序；它只改变视觉顺序，不影响可访问性与 SEO。
flex-order 属性只在 flex 容器内生效
直接给一个 div 设置 order 不起作用，前提是它的父元素必须是 display: flex 或 display: inline-flex。否则浏览器会忽略该声明。
常见误操作：在 grid 布局或普通文档流中写 order: 2，结果完全没反应——这不是 bug，是规范行为。
- 检查父容器是否设置了
display: flex - 确认子元素没有被
float、position: absolute等脱离文档流的样式干扰（flex 子项中float和vertical-align会被忽略） - 注意：IE10–IE11 支持
-ms-flex-order，但不支持无前缀的order
order 数值越小，排列越靠前
order 默认值是 0，它不是索引，而是“层叠顺序”的排序依据：数值小的排在前面，相同时按 HTML 源顺序排列。
比如三个子元素分别设为 order: 1、order: -1、order: 0，实际渲染顺序是 -1 → 0 → 1，而不是按设置顺序。
立即学习“前端免费学习笔记（深入）”；
- 负数合法且常用，比如把侧边栏
order: -1提到主内容之前 - 不要依赖大正整数（如
order: 999）来“强行置后”，应优先考虑语义化结构 + 合理的数值差 - 同值时 DOM 顺序仍起作用，这点常被忽略——
order不是完全取代源序，而是分组再排序
和 flex-direction 配合时要注意方向逻辑
order 的“前后”是相对于当前 flex-direction 的主轴方向而言的。例如：
-
flex-direction: row→order控制从左到右顺序 -
flex-direction: row-reverse→order仍按数值升序，但视觉上小值出现在右边 -
flex-direction: column→order控制从上到下顺序
也就是说，order 始终按数值升序排列，但“升序方向”由 flex-direction 决定。调试时建议先固定 flex-direction，再调 order，避免叠加导致预期外翻转。
order 不影响可访问性和 SEO 的源顺序
屏幕阅读器、搜索引擎爬虫、键盘 Tab 导航仍按 HTML 原始顺序处理，order 只改变视觉呈现。如果把“跳转到主内容”的链接用 order: -1 提前，但 DOM 里它还在页脚，辅助技术用户依然得先经过导航才能到达。
- 需要真正提升可访问性时，优先调整 HTML 结构，而非仅靠
order - 若必须用
order做视觉重排，请配合aria-flowto或tabindex显式声明逻辑顺序（但支持度有限） - 移动端双列布局中，用
order把侧边栏移到主内容下方很常见，但记得在桌面端还原其语义位置
