flex-wrap 不控制元素顺序，只决定换行行为；顺序由 HTML 结构、order 属性或 JavaScript 控制；order 是唯一可直接重排 flex 项目的 CSS 属性，数值越小越靠前。
flex-wrap 本身不控制元素顺序，只控制换行行为
很多人误以为 flex-wrap 能改变子元素的排列顺序，其实它只决定当主轴空间不足时，子项是强行压缩（nowrap）还是换行（wrap 或 wrap-reverse）。真正的顺序由 HTML 结构、order 属性或 JavaScript 控制。
用 order 属性手动调整 flex 项目显示顺序
order 是唯一能直接在 CSS 中重排 flex 子项的属性。默认值为 0，数值越小越靠前，相同值则按 DOM 顺序排列。
常见使用场景：
- 响应式中把侧边栏移到内容下方（移动端）
- 广告位临时插到列表中间但不改 HTML
- 表单控件按逻辑分组而非结构顺序展示
示例：
立即学习“前端免费学习笔记（深入）”；
.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 3; }
即使 .item-a 在 HTML 中最先出现，也会排在第二位。
flex-wrap: wrap-reverse 会翻转换行方向，不是翻转元素顺序
flex-wrap: wrap-reverse 的作用是让新行出现在旧行上方（主轴起点方向），但每行内部的顺序仍由 order 和 DOM 决定，不会倒序排列子项。
容易踩的坑：
- 误以为
wrap-reverse等价于数组reverse()—— 它只是改变了换行堆叠方向 - 在
flex-direction: column下，wrap-reverse表现为从下往上新增列，不是从右往左 - 和
direction: rtl混用时，视觉顺序更易混淆，建议避免叠加
真正实现“自动排序”需结合 JavaScript + order
如果要根据数据状态（如价格、时间、评分）动态排序，CSS 无能为力，必须用 JS 更新 order 值：
items.forEach((el, index) => {
el.style.order = sortedData.indexOf(el.dataset.id);
});
注意点：
- 不要直接操作
style.order频繁重排，批量更新后触发一次重绘更稳妥 - 服务端已排序好再渲染，比客户端 JS 排序更稳定、首屏更快
- 若需无障碍支持，仅靠
order不够，还需同步调整 DOM 顺序或用aria-sort
flex 布局里没有“自动排序”这个内置机制，所有看似自动的效果，背后都是显式的 order 控制或 JS 驱动。别指望 flex-wrap 承担它不该负责的事。
