flex-wrap 是控制 flex 容器换行的关键属性，仅 nowrap（默认，强制单行）、wrap（按需折行）、wrap-reverse（反向折行）三个值合法；nowrap 下子项不换行、可能溢出；wrap/wrap-reverse 才触发换行，方向由 flex-direction 与 flex-wrap 共同决定。
flex-wrap 是决定 Flex 容器是否换行的开关，不是可有可无的修饰项。它只有三个合法值：nowrap（默认）、wrap、wrap-reverse。其中，只有后两者才会触发换行行为。
nowrap：强制单行，不讲道理
这是浏览器默认值。只要没显式声明 flex-wrap，就等于设了 nowrap。此时：
- 所有子项被锁死在一行，不管总宽度是否远超容器
- 子项可能被压缩（如果允许 shrink）、溢出（如未设 overflow:hidden）、或拉出横向滚动条
- 即使写了 white-space: normal、overflow-wrap: break-word，也大概率无效——因为父容器根本不给换行机会
- 动态插入新元素时，新项会硬塞进当前行，导致布局错乱或内容截断
wrap：按需折行，最常用也最实用
设为 wrap 后，容器才真正启用“空间不足就另起一行”的逻辑：
- 主轴方向为 row 时，新行从上到下堆叠；为 column 时，新列从左到右排列
- 每行内部仍受 justify-content 控制（比如 justify-content: center 让该行居中）
- 多行整体在交叉轴上的分布由 align-content 决定（如 align-content: flex-start 让所有行贴顶）
- 但前提是：父容器要有明确宽度（如 width 或 max-width），且子项不能“锁死”自身尺寸（比如 flex-shrink: 0 + 固定 width）
wrap-reverse：换行方向翻转，慎用
行为和 wrap 一致，只是堆叠顺序相反：
- row + wrap-reverse：新行出现在旧行上方，第一行在底部
- column + wrap-reverse：新列出现在旧行左侧，第一列在右边
- 实际项目中极少需要，设错后容易造成视觉错位，调试时建议先确认是否真需要这个方向
别被 flex-direction 带偏
flex-direction 只管排列方向（横排还是竖排），不管换不换行。哪怕写了 flex-direction: column，只要没设 flex-wrap: wrap，它依然不会“换列”。所谓“换列”，其实是 column 主轴下 height 不足时，向右新增一列——这本质仍是 flex-wrap 的作用，不是 direction 的功劳。
