flex-wrap: wrap 实现自动换行，需配合 flex-basis 或 width 控制子项基础宽度，并注意 flex-shrink 默认值导致的压缩不换行问题及 gap 兼容性陷阱。
flex-wrap 属性控制换行行为
弹性盒子默认不换行，即使子项总宽度超出容器，也会强行压缩或溢出。关键在于设置 flex-wrap，它有三个值：nowrap（默认，不换行）、wrap（换行，第一行在上）、wrap-reverse（换行，第一行在下）。要实现“自动换行”，必须显式设为 wrap。
仅靠 flex-wrap: wrap 还不够——它只决定“是否允许换行”，不决定“何时换行”。换行时机由子项的尺寸和容器剩余空间共同决定。所以通常需配合子项的 flex-basis 或 width 控制单个子项的基础宽度。
- 容器必须声明
display: flex和flex-wrap: wrap - 子项避免写死过宽的
width（如width: 300px），否则小屏下仍不换行 - 推荐用
flex: 0 1 calc(50% - 8px)这类响应式基础宽度，留出间隙余量
@media 中调整 flex-wrap 和子项比例
媒体查询不是用来“触发换行”的开关，而是用来在不同断点下重新定义布局结构。比如：大屏下每行 4 个卡片，中屏改 2 个，小屏改 1 个。这时重点不是改 flex-wrap（它通常一直保持 wrap），而是改子项的 flex-basis 或 max-width。
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
<p>.item {
flex: 0 1 calc(25% - 9px); /<em> 默认每行 4 个 </em>/
}</p><p>@media (max-width: 768px) {
.item {
flex: 0 1 calc(50% - 6px); /<em> 中屏每行 2 个 </em>/
}
}</p><p>@media (max-width: 480px) {
.item {
flex: 0 1 100%; /<em> 小屏每行 1 个 </em>/
}
}</p>
-
gap比margin更可靠，不会影响flex-basis计算 - 计算时减去的像素数 =
gap / 2 * (子项数 - 1)，但直接写近似值（如-9px）更稳妥 - 不要在媒体查询里反复切
flex-wrap值，除非真有“小屏强制单列不换行”这种特殊需求
常见错误：flex-shrink 导致换行失效
即使写了 flex-wrap: wrap，子项仍挤在一行？大概率是 flex-shrink: 1（默认）让它们被强行压缩，没到换行临界点就“妥协”了。尤其当子项含文字、图片等不可缩内容时，压缩失败会溢出，但 flex 引擎仍认为“还能压”，拒绝换行。
- 给子项加
flex-shrink: 0可阻止压缩，逼它按设定宽度换行 - 或者改用
flex: 0 0 auto（不伸缩、不收缩、按内容宽） - 若需文字折行，额外加
word-break: break-word或overflow-wrap: break-word
移动端 Safari 的 gap 兼容性陷阱
iOS 14.5+ 支持 gap，但旧版 Safari 不支持。如果项目需兼容 iOS 13 或更早，不能依赖 gap 实现间距，否则子项实际宽度计算错误，导致换行错乱。
- 方案一：用
margin模拟，但需处理首行/末行多余外边距（可用:nth-child或 wrapper 包裹） - 方案二：降级用
padding+ 负 margin 容器，但复杂度高 - 检查方式：在真机 Safari 中打开，查看元素盒模型，确认间距是否来自
gap还是 fallback 规则
换行逻辑本身不难，难的是在各种屏幕、各种内容长度、各种浏览器渲染差异下，让 flex-basis、flex-shrink、gap 和媒体查询的断点数值真正对齐。调试时优先关掉 flex-shrink 看原始宽度表现，再逐步放开收缩策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
