flex-wrap: wrap 换行失效主因是父容器无宽度限制或子元素默认 min-width: auto 导致强制撑宽；应设父容器 width/max-width，避免 flex: 1，改用 flex: 0 0 auto 或固定宽+flex-shrink: 0，并禁用 white-space: nowrap；间距推荐用 gap 替代 margin 防换行错位。
flex-wrap: wrap 为什么盒子没平铺开
常见现象是设了 flex-wrap: wrap，但子元素还是挤在一行、换行失效。根本原因通常是父容器没设宽度，或子元素用了 min-width: auto（Flex 默认行为），导致浏览器强行撑宽容器不换行。
- 给父容器明确设
width或max-width，比如width: 100%或具体像素值 - 子元素避免用
flex: 1或flex: 1 1 auto—— 它会优先拉伸而非换行；改用flex: 0 0 auto或固定宽度 +flex-shrink: 0 - 检查是否误加了
white-space: nowrap在父容器上，它会干扰 flex 换行逻辑
盒模型间距导致换行错位或留白异常
用 margin 控制子项间距时，容易在换行后首行/末行出现多余空白，或最后一行对不齐 —— 这是因为 margin 不会自动“折叠”，每项都带右边距，末尾项也照算。
- 推荐用
gap替代margin：它只作用于项与项之间，换行时自动处理，且不触发外边距合并问题 - 如果必须用
margin，可用:nth-child(n)选择器清除末尾项的右侧/下侧 margin，但需知道每行数量才能精准写 -
gap在 Safari 旧版本（margin +calc()调整容器宽度补偿间隙
flex-wrap: wrap 在不同尺寸下的响应表现
平铺布局常用于响应式卡片列表，但仅靠 flex-wrap 无法自动适配屏幕变化 —— 它只是“允许换行”，不决定何时换、怎么排。
- 单靠
flex-wrap无法实现“每行固定 3 个”，得配合子元素宽度控制，比如flex-basis: calc(33.333% - 8px)（含 gap） - 移动端小屏下，若子项宽度写死（如
200px），可能单行只容得下 1 个就换行，显得稀疏；建议用相对单位（%、em）或min-width+flex-basis组合 - 注意
flex-basis设为auto时，会按内容宽度计算，可能导致同一行内高度不一致，影响视觉平铺感
IE11 中 flex-wrap: wrap 的兼容性陷阱
IE11 支持 flex-wrap，但存在两个关键 bug：一是 gap 完全不识别；二是当子元素含 display: flex 且内部有 flex: 1 时，父级 flex-wrap 可能失效。
立即学习“前端免费学习笔记（深入）”；
- 必须用
margin模拟gap，并用*margin-right: 0（IE hack）清除非最后一项的右 margin - 避免在 flex 子项里嵌套多层 flex 容器，尤其不要让子项的子项也设
flex: 1；可改用width: 100%或display: block临时规避 - IE11 对
flex-basis的百分比解析不稳定，建议统一用像素值或max-width配合flex: 0 0
真正卡住的往往不是 flex-wrap 本身，而是盒模型细节叠加响应逻辑后的组合效应——比如 gap 和 flex-basis 在不同浏览器中对剩余空间的分配策略差异，稍不注意就会在某个分辨率下突然错行。
