必须显式设置 flex-wrap: wrap，否则子项永不换行；flex 容器默认 nowrap，超宽时压缩或溢出而非折行；flex: 1 会阻止换行，应改用 flex: 0 0 25% 等固定基准宽写法。
必须显式设置 flex-wrap: wrap，否则子项永远不换行——这是 90% 的“布局卡死”问题根源。
为什么写了 display: flex 却不换行？
Flex 容器默认是 flex-wrap: nowrap，哪怕子项总宽度远超容器，浏览器也只会压缩或溢出，绝不会折行。这不是 bug，是设计行为。
常见错误现象：
- 子项全挤在一行，右侧内容看不见
- 缩小窗口后布局完全不变，甚至出现横向滚动条
- 写了
width: 25%，但第 5 个子项仍被挤到下一行——因为没开换行，浏览器优先拉伸子项填满单行
解决办法：父容器必须加 flex-wrap: wrap（现代写法），IE11 需额外加 -ms-flex-wrap: wrap。
flex: 1 会让换行失效，该用什么？
flex: 1 的本质是“占满剩余空间”，它会强制子项撑开整行，导致换行条件永远无法触发。
推荐写法（按场景选）：
- 固定列数（如每行 4 列）：
flex: 0 0 25%（不放大、不缩小、基准宽 25%） - 带
gap的健壮写法：flex: 0 0 calc(25% - 8px)（假设gap: 8px） - 响应式最小宽度控制：
flex: 0 0 minmax(200px, 1fr)（注意：Flex 原生不支持minmax，此写法需搭配 Grid；Flex 中只能用媒体查询或 JS 模拟）
绝对避免：flex: 1、flex: 1 1 auto、width + flex-grow 混用——它们会让子项失去尺寸锚点。
多行对齐和 IE11 兼容性最容易被忽略
换行后，“行”本身成为新维度的单元，此时起作用的是 align-content，不是 align-items：
-
align-content: stretch（默认）：各行高度被拉满容器，适合等高卡片 -
align-content: flex-start：所有行顶部对齐，适合列表类内容，避免底部大片留白 -
align-content: center：要求容器有明确高度（如height: 400px），否则无效
IE11 两个上线前高频翻车点：
-
flex-wrap支持不稳定：若子项用了flex: 1，即使写了-ms-flex-wrap: wrap也可能拒绝换行 -
gap完全不支持：必须回退到margin模拟，且要小心父子 margin 折叠
真正难的不是写出能换行的代码，而是让换行在各种宽度下都稳定触发、间隙可控、多行对齐符合预期，且兼容旧环境时不靠 JS 补丁硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
