flex-wrap 是控制 flex 子项是否换行及换行方向的属性，非 flex-direction；其 nowrap（默认）、wrap、wrap-reverse 三值中仅后两者触发换行，漏设会导致溢出或压缩。
flex-wrap 是什么，为什么不能只靠 flex-direction
Flex 容器默认不换行，即使子元素总宽度超过容器，flex-direction: row 也会强行压缩或溢出。真正控制是否折行、怎么折行的，是 flex-wrap，不是 flex-direction。它有三个合法值：nowrap（默认）、wrap、wrap-reverse，只有后两者才会让子项在空间不足时换到下一行（或上一行）。
常见错误现象：flex 容器里塞了 5 个 flex-1 的卡片，结果全挤在一行、文字被截断、横向滚动条意外出现——根本原因就是忘了加 flex-wrap。
-
wrap：从主轴起点开始换行，新行在旧行下方（row 时）或右方（column 时） -
wrap-reverse：换行方向相反，比如row+wrap-reverse会让新行出现在旧行上方 - 不写
flex-wrap就等于flex-wrap: nowrap，哪怕写了flex-direction: column也一样不换列
tailwind 中 wrap 和 wrap-reverse 的实际用法差异
Tailwind 把 flex-wrap 拆成两个原子类：flex-wrap 对应 wrap，flex-wrap-reverse 对应 wrap-reverse。它们和 flex-row/flex-col 组合使用才有意义，单独用没效果。
使用场景举例：做响应式标签云，小屏希望标签垂直堆叠但顶部对齐；大屏希望水平排列并自动换行。这时候不能只靠 flex-col，得配合 flex-wrap 控制“列内是否允许换行”——但注意：flex-col + flex-wrap 实际是允许“换列”，也就是当高度不够时，新项会向右排，不是向下排。
-
flex-row flex-wrap：标准水平流+换行（最常用） -
flex-col flex-wrap：垂直流+“换列”，即高度超限时向右新增一列 -
flex-col flex-wrap-reverse：高度超限时向右新增一列，且该列内容从底部开始对齐 - 别误以为
flex-col+flex-wrap能实现“高度不足就向下延伸”——Flex 没有“自动换列到底部”的概念，那是 Grid 的事
换行后子项对齐问题：justify-content 不再管跨行
一旦启用 flex-wrap，justify-content 只作用于**当前行内**的子项分布，不再拉伸整块区域。比如 justify-between 在单行时两端对齐，但在两行时，每行各自两端对齐，不会让第一行左、第二行右。
如果你需要所有子项整体均匀分布（不管几行），就得换思路：display: grid 更合适；或者用 flex 配合 gap + justify-content: center 避免两端空隙过大。
-
justify-center+flex-wrap：每行居中，但行与行之间无间隔控制 -
gap-2可以替代部分justify-类的作用，让换行后间距更可控 - 想让最后一行也撑满？
justify-between无效，得用flex-grow或伪元素补位，但 Tailwind 没直接对应类，需自定义
移动端换行失效的典型原因
写好了 flex-wrap，但手机上看还是不换行？大概率是子项设置了固定宽（如 w-64）或最小宽（min-w-0 未重置），导致 Flex 无法收缩换行。
另一个隐蔽坑：父容器被设了 white-space: nowrap（比如从某个 UI 库继承的样式），它会强制内部文本不折行，间接影响 Flex 子项的尺寸计算逻辑。
- 检查子项是否有
flex-shrink-0或min-w-full这类阻止收缩的类 - 用浏览器开发者工具看 computed 样式里
flex-basis是否为auto；如果不是，换行可能被抑制 - 在移动端调试时，临时加
flex-none看是否换行恢复——如果恢复，说明是子项弹性行为干扰了 wrap 判断
换行不是 Flex 的默认本能，而是你明确告诉它的动作。漏掉 flex-wrap，或子项锁死了尺寸，都会让布局卡在“我以为它该换”的错觉里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
