flex-direction 决定 flex 容器主轴方向，从而改变元素排列顺序：row（左→右）、row-reverse（右→左）、column（上→下）、column-reverse（下→上），配合 order 属性可实现响应式视觉重排。
flex-direction 怎么影响元素排列方向
在响应式布局中，flex-direction 决定主轴方向，直接改变元素默认的阅读流顺序。它不移动元素本身，但会翻转整个容器的“起点”和“终点”。
常见取值与行为：
-
row（默认）：从左到右，order值小的元素靠左 -
row-reverse：从右到左，order值小的元素反而靠右 -
column：从上到下，order小的在顶部 -
column-reverse：从下到上，order小的在底部
注意：flex-direction: row-reverse 和 order 混用时容易误判最终位置——比如两个子项分别设 order: 1 和 order: 2，在 row-reverse 下，order: 2 的反而显示在左边。
order 属性只对 flex 子项生效
order 不是全局重排工具，它仅作用于同一 flex 容器内的直接子元素。父容器没设 display: flex 或 display: inline-flex，order 完全无效。
立即学习“前端免费学习笔记（深入）”；
典型错误场景：
- 给嵌套多层的后代元素加
order，不起作用 - 用
float或position: absolute脱离文档流后，该元素不再参与 flex 排序 - 在 Grid 布局中误用
order（Grid 用grid-order不存在，应改用grid-row/grid-column）
示例：正确写法
.container {
display: flex;
}
.item-a { order: 2; }
.item-b { order: 1; }
此时 .item-b 会显示在 .item-a 左侧（flex-direction: row 下）。
响应式中用媒体查询切换 order 和 flex-direction
真正控制“视觉顺序”而非“源码顺序”，靠的是在不同断点下动态调整 order 和 flex-direction 的组合。
常见需求与写法：
- 移动端把侧边栏移到内容下方：
→ 移动端设flex-direction: column，再给侧边栏设order: 2；桌面端保持row+ 默认order: 0 - 反转导航菜单顺序（如把“登录”提到最前）：
→ 桌面端用flex-direction: row-reverse，再微调个别项的order补偿 - 避免重排导致跳动：所有 flex 项统一声明初始
order（如都设为order: 0），再在媒体查询里覆盖，防止未声明项被浏览器按 DOM 顺序兜底排序
性能提示：频繁触发 order 变化不会引起重排（re-flow），但可能触发重绘（re-paint），对动画敏感场景建议配合 will-change: transform 或使用 transform 替代。
order 的数值不是索引，而是排序权重
order 默认值是 0，负值（如 -1）比 0 靠前，正值（如 99）比 0 靠后。它不关心你跳着写 order: -5、order: 1000，只按数值大小排序。
易忽略细节：
- 相同
order值的元素，仍按 HTML 源码顺序排列（即文档流顺序 fallback） -
order不支持百分比、em 等单位，只能是无单位整数或无单位数字（如order: 0.5合法但会被向下取整为0） - 服务端渲染（SSR）或 SEO 场景下，
order改变的是视觉顺序，不影响语义顺序和读屏器遍历顺序——需要同步调整aria-order或 DOM 结构
真正难的不是写对语法，而是判断哪些地方必须改 DOM、哪些能靠 CSS 视觉重排解决；尤其当交互状态（如折叠/展开）也影响顺序时，order 很容易和 JS 控制的 class 冲突。
