flex-wrap 不控制单个子项换行顺序，仅决定整行是否折行；强制某子项独占一行需用 flex-basis: 100% 或插入 100% 宽分隔符，order 仅改变视觉顺序，不触发换行。
flex-wrap 本身不控制“单个子项”的换行顺序
Flex 换行是容器级行为，flex-wrap 只决定「整行是否折到下一行」，它不管哪个子项该在哪一行。所谓“单独控制某个子项换行”，本质是让那个子项**成为新行的第一个元素**——这得靠 flex-direction + order 或人为制造“断点”，而不是给单个子项加换行属性。
用 order 把目标子项“推”到新行开头
当其他子项 order: 0（默认），你把第 3 个子项设为 order: -1，它就会视觉上跑到最前面；但如果容器宽度不够放两个，它仍可能被挤到第二行——这不是它“主动换行”，而是 Flex 自动折行的结果。
-
order只改变视觉顺序，不影响 DOM 顺序或换行触发逻辑 - 想确保某子项独占一行，最可靠方式是让它
flex-basis: 100%或width: 100%，强制撑满整行 - 配合
flex-wrap: wrap，它自然会成为新行起点，后面元素跟在它下方
用 flex-direction: column + flex-wrap: wrap 模拟“垂直换行”
主轴变成垂直方向后，flex-wrap: wrap 的“换行”实际是换列：子项从上到下排满一列后，自动向右新增一列。这时，你想让第 3 个子项出现在第二列顶部？只需给它设 order: 2（假设前两个是 order: 0 和 order: 1），它就会在第二列第一个位置渲染。
- 注意：
justify-content此时控制的是水平对齐（因为主轴是 vertical），别误用flex-start想“左对齐”却得到“顶对齐” -
align-items控制的是垂直对齐（侧轴变成 horizontal），这才是真正管左右的 - 这种组合容易在响应式断点里出错：
flex-direction切换后，flex-wrap的堆叠方向也变了，但开发者常只改 direction 忘了检查 wrap 行为
真正能“强制换行”的只有 break-before 或伪元素 hack
CSS 里没有 flex-break: before 这种东西。目前唯一标准方案是给目标子项加 break-before: column（需配合 display: flow-root 或多列容器），但这和 Flex 无关；更常见的做法是插入一个空 <div style="flex-basis: 100%; height: 0"></div> 作为换行分隔符。
- 这个空 div 不占视觉高度，但因
flex-basis: 100%，它会独占一行，后面所有子项自动落到下一行 - 不要用
clear: both或float——在 Flex 容器里完全无效 - 如果子项是动态生成的，建议在 JS 层面控制插入时机，而不是靠 CSS 硬塞分隔符
最容易被忽略的是：你以为在调“换行顺序”，其实是在调“视觉顺序”或“容器流方向”。flex-wrap 从不决定谁先换行，它只决定“换不换”。真要精确控制每行内容，要么用 Grid，要么老老实实拆容器——Flex 的设计哲学本就不支持细粒度行控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
