flex卡片重叠主因是子项宽度加padding超容器空间，应改用calc()调整flex-basis、用gap替代margin、小屏强制column布局，并注意auto-fit仅适用于grid而非flex。
flex-wrap: wrap 但卡片仍重叠？检查 flex-basis 和 padding 的实际占用
Flex 多列卡片在超小屏（如 320px 宽）下重叠，往往不是 flex-wrap 没生效，而是子项“算出来的宽度 + 内边距”远超容器可用空间。例如设 flex: 0 0 25%，再加 padding: 16px，小屏下单列实际占宽可能达 100px+，四列总宽轻松突破 400px —— 这时即使启用了换行，浏览器也会因内容过宽而把部分卡片压进同一行，视觉上就是“挤在一起、文字重叠”。
解决思路是让 flex-basis 真正反映可分配空间：
- 改用
flex: 0 0 calc(25% - 12px)（若gap: 16px，则每列需预留约 12px 间隙均摊值） - 或更稳妥：统一用
min-width: 240px+flex: 1 1 0，让 Flex 自动均分剩余空间，避免百分比计算失真 - 务必移除子项的左右
padding，改用父容器的gap控制间距 ——gap不参与 flex-basis 计算，不会导致换行失效
为什么 auto-fit + minmax 在 Flex 场景下不直接适用？
auto-fit 和 minmax() 是 Grid 的能力，不能直接写在 Flex 容器上。有人误把 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 套到 display: flex 元素上，结果样式完全失效，还查不出原因。
如果你需要 Grid 级别的自动列数控制，就该切到 Grid：
- 把父容器改成
display: grid - 用
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) - 保留
gap: 16px，无需媒体查询就能在 320px 屏上自然退化为单列
Flex 本身不支持“根据内容宽度反推列数”，它只按主轴顺序排布；Grid 才真正理解“轨道容量”和“空隙填充”。
超小屏强制单列堆叠的兜底方案
当屏幕窄到连一张卡片都难以舒适展示（比如 max-width: 360px），硬撑两列只会让文字缩成一团、点击区域过小。此时应主动放弃多列，切换为垂直堆叠。
推荐写法：
- 默认用 Flex +
flex-wrap: wrap+min-width: 240px支持中大屏 - 加一条媒体查询：
@media (max-width: 375px) { .card-container { flex-direction: column; align-items: stretch; } .card { width: 100%; margin-bottom: 12px; } } - 注意：不要只改
flex-direction，还要清除原有flex-basis或设width: 100%，否则卡片可能仍按旧尺寸挤在单列里
gap 替代 margin 是防重叠的关键细节
很多人用 margin-right 模拟列间距，但在 Flex 中这极易引发换行错乱：最后一列带 margin-right 会多占空间，触发提前换行；而 gap 是容器级属性，只作用于项目之间，不计入子项自身尺寸。
所以：
- 删掉所有子项的
margin（尤其是margin-right/margin-bottom） - 在父容器统一写
gap: 16px（Flex 和 Grid 都支持） - 若需兼容 IE，才退回到
margin+:nth-child排除最后一项，但现代项目基本不用
这个细节不起眼，却是小屏下卡片能否干净断行的分水岭 —— 很多人调了半小时 flex-wrap 却没意识到问题出在那一行 margin-right: 16px 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
