flex-wrap: wrap 是换行的唯一开关，不设置则子元素永远不换行；默认 nowrap 会强制单行溢出，必须显式声明 wrap 才启用换行逻辑，且需父容器有明确宽度、子项可收缩。
flex-wrap: wrap 是换行的唯一开关，不加它就永远不换行
Flex 容器默认是 flex-wrap: nowrap，哪怕子项总宽度远超容器，浏览器也只会强行压缩或溢出，绝不会自动折行。你看到的“不换行”，不是 bug，是设计如此——它必须被显式开启。flex-wrap: wrap 才是真正触发换行逻辑的条件，缺它等于没装发动机。
常见错误现象：
- 写了
display: flex，但子项全挤在一行，右侧内容看不见 - 调小窗口宽度，布局完全不变，甚至出现横向滚动条
- 子项用了
width: 25%，但依然不按预期每行 4 个——因为没开换行，浏览器优先拉伸/压缩子项填满单行
子项宽度不能只靠 flex: 1，否则换行直接失效
flex: 1 的本质是“占满剩余空间”，它会强制子项撑开，把整行塞满，导致换行条件永远无法满足。要让换行生效，子项必须有可衡量、可收缩的基准尺寸。
- 推荐写法：
flex: 0 0 25%（不放大、不缩小、基准宽 25%），适合固定列数场景 - 更健壮的写法：
flex: 0 0 calc(25% - 8px)，配合gap: 8px避免因间距导致第 5 个子项被挤下一行 - 响应式写法：
flex: 0 0 minmax(200px, 1fr)（需配合 Grid 替代方案，Flex 原生不支持 minmax，此处仅作对比提醒） - 绝对避免：
flex: 1或flex: 1 1 auto，它们会让子项失去尺寸锚点
换行后多行对齐容易被忽略：align-content 不等于 align-items
单行时用 align-items 控制子项在交叉轴（通常是垂直方向）的对齐；但换行后，所有“行”本身成了新维度的单元，这时起作用的是 align-content——它控制的是行与行之间的分布方式。
立即学习“前端免费学习笔记（深入）”；
-
align-content: stretch（默认）：各行高度被拉满容器，适合卡片等高需求 -
align-content: flex-start：所有行顶部对齐，适合列表类内容，避免底部大片留白 -
align-content: center：多行整体在容器中垂直居中，但要求容器有明确高度（如height: 400px），否则无效 - 别混淆：
align-items: center只让每行内的子项垂直居中，不影响行与行之间的空隙
IE11 和 gap 兼容性是上线前最容易漏掉的两个点
真实项目里，这两个问题常在验收阶段突然暴露，尤其当测试环境用的是模拟器而非真 IE11 时。
- IE11 对
flex-wrap支持不稳定：若子项用了flex: 1，即使写了-ms-flex-wrap: wrap也可能拒绝换行。稳妥做法是彻底弃用flex: 1，改用flex: 0 0 25%+ 手动计算 margin - IE11 不支持
gap，必须回退到margin模拟，但要注意最后一行子项的margin-right会导致父容器溢出，需用:nth-child(4n)清除 - 现代项目若已放弃 IE 支持，
gap是首选：它不污染子项样式、不引发 margin 合并、且能同时控制行内和行间距离
换行不是加个 wrap 就完事。真正卡住你的，往往是子项有没有尺寸底线、多行时对齐意图是否表达清楚、以及旧浏览器有没有真实跑过 —— 这三点任意一个没验证，就可能在线上某个窄屏手机或某台老电脑上突然不换行。
