flex-wrap: wrap 是换行的唯一开关，不设置则子元素强制单行溢出；必须显式声明才能触发换行逻辑，且需配合父容器明确宽度、子项可收缩（如min-width: 0）及合理对齐控制（align-content）。
flex-wrap: wrap 是换行的开关，不设它子元素死扛也不换
默认情况下 flex-wrap 值是 nowrap，哪怕容器宽度明显不够，所有子元素也会强行挤在一行，溢出或缩小到看不见。必须显式设成 wrap 或 wrap-reverse 才会触发换行逻辑。
常见错误是只写了 display: flex 就以为万事大吉，结果布局卡死。记住：Flex 容器默认不换行，这是和 inline-block 最关键的区别之一。
子元素宽度没约束时，flex-wrap 可能“假装换行”
即使设置了 flex-wrap: wrap，如果每个子元素都用 flex: 0 0 auto（比如没设 flex-basis 或 width），它们会按内容宽度撑开——可能一个字就占满整行，看起来像换行了，其实只是每个 item 自己太宽。
实操建议：
- 给子元素设明确的
flex-basis，比如flex: 0 0 200px或flex: 1 1 200px - 或统一用
width+flex-shrink: 1防止溢出 - 避免只依赖
flex-grow: 1，它会让子项抢空间，反而干扰换行节奏
换行后对齐方式由 align-content 控制，不是 align-items
align-items 管的是**单行内**子元素在交叉轴上的对齐（比如每行里 items 垂直居中），而换行后多行之间的间距和对齐，得靠 align-content。
典型场景：三行卡片，想让它们在容器里顶部对齐、底部对齐、还是均匀拉开？
-
align-content: flex-start→ 所有行贴顶 -
align-content: center→ 行组整体居中（注意不是每行居中） -
align-content: space-between→ 首尾行贴边，中间等距 - 不设
align-content默认是stretch，行高会被拉满容器高度
IE11 对 flex-wrap 的支持有隐藏陷阱
IE11 支持 flex-wrap，但存在两个实际问题：
- 当子元素含
flex: 1且容器无固定宽高时，IE11 可能完全不换行，表现像nowrap -
align-content在 IE11 中对flex-direction: column无效 - 解决方案：加
min-width: 0到子元素，或改用flex: 0 0 calc(50% - 8px)这类确定值替代纯flex: 1
换行本身不难，难的是换完之后行与行之间怎么排、每行内部怎么缩放、以及老浏览器里哪条规则会突然失效。别只盯着 wrap 两个字母，真正起作用的是它和 flex-basis、align-content、甚至 min-width 的组合效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
