flex布局方向切换时子项视觉顺序错乱，需用order属性显式控制逻辑顺序；order默认0、数值越小越靠前，排序在flex-direction之后执行，且不影响dom结构和可访问性。
flex布局方向切换（比如从 row 改成 column，或启用 flex-direction: row-reverse / column-reverse）时，子项视觉顺序可能和预期不符，本质是 flex 仍按 DOM 顺序渲染，但反向排列后“第一个元素”变成了最后一个。这时单靠方向切换不够，需配合 order 属性主动控制逻辑顺序。
理解 order 属性的作用机制
order 默认值为 0，数值越小越靠前；它不改变 DOM 结构，只影响 flex 容器内的绘制顺序。注意：它只对 flex 子项生效，且排序发生在 flex-direction 确定主轴方向之后——也就是说，先按方向排主轴，再按 order 调整同级位置。
- 所有子项
order相同时，完全遵循 DOM 顺序 + flex-direction 方向 - 当方向反转（如
row-reverse），DOM 第一个元素会出现在最右/最下，但若给它设order: -1，它就可能“挤到最左/最上” -
order是整数，支持负值、0、正值，推荐用连续小整数（如 -1, 0, 1, 2）便于维护
方向切换后重排顺序的实用策略
不要依赖“改方向就自动倒序”，而是把 order 当作显式排序工具：
- 先确定你想要的最终视觉顺序（比如移动端竖排时 A-B-C，桌面端横排时想变成 C-B-A）
- 为每个子项设定固定
order值，与方向无关——例如 A 设order: 2，B 设order: 1，C 设order: 0 - 这样无论
flex-direction是row还是column-reverse，C 总在最前，A 总在最后
配合媒体查询实现响应式顺序控制
常见需求：PC 端横向从左到右（A→B→C），移动端纵向希望顶部是 C，中间 B，底部 A。可这样写：
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; flex-direction: row; } .item-a { order: 2; } .item-b { order: 1; } .item-c { order: 0; } <p>@media (max-width: 768px) { .container { flex-direction: column; } /<em> 顺序已由 order 控制，无需额外调整 </em>/ }此时即使 flex-direction 变成 column，order 仍保证 C 在最上、A 在最下。
避免 order 使用误区
order 很有用，但容易误用：
- 别用大跨度数字（如 100、999），后期插入新元素难调整；统一用 -2, -1, 0, 1, 2 更灵活
- 不要和
flex-direction: reverse叠加“双重反转”，易造成逻辑混乱；优先用order表达意图 - 注意可访问性：屏幕阅读器仍按 DOM 顺序读取，若视觉顺序和 DOM 差异大，建议用
aria-order或调整 html 结构辅助语义
基本上就这些。方向切换只是改变了主轴流向，真正决定“谁先出现”的，是你写的 order 值。不复杂但容易忽略，理清这个逻辑，顺序错乱问题基本一招解决。