Flex换行后首项去左margin的通用解法是用gap替代margin，即在容器设gap:12px；若需兼容旧浏览器，则用margin-right+伪类清除或虚拟占位项兜底。
Flex换行后首项去左margin的通用解法
直接用 margin-left 给所有子项加间距会导致换行后每行第一个元素也带左边距，视觉上错位。这不是Flex本身的问题，而是CSS缺乏“每行首项”伪类（:first-of-line 不适用于Flex容器），必须靠其他方式规避。
用 margin-right 替代 margin-left
把间距逻辑从“每个元素往左推”改成“每个元素往右推”，就能自然避开首项多出的空白：
- 给所有子项设置
margin-right: 12px，而不是margin-left - 对最后一列（即每行最后一个元素）用
:nth-child(n)或:nth-last-child()清除右外边距，避免右侧溢出 - 若每行固定显示 3 个子项，可用
.item:nth-child(3n) { margin-right: 0; } - 若响应式导致列数变化（如移动端变2列），需配合媒体查询重置
n值
用 gap 替代 margin（推荐但注意兼容性）
gap 是Flex和Grid原生支持的间隙属性，它只作用于项目之间，不会出现在容器边缘，天然解决首项/末项多边距问题：
- 在Flex容器上设置
display: flex; flex-wrap: wrap; gap: 12px; - 无需任何额外选择器或JS，代码更干净
- 兼容性：Chrome 84+/Firefox 63+/Safari 14.1+；IE完全不支持，如需兼容IE，不能用此方案
-
gap同时控制行内和行间间距，若需行列间距不同，得回退到margin+ 选择器组合
用伪元素 + flex: 0 0 auto 模拟“虚拟首项”（少见但可控）
当必须保留 margin-left 且列数不固定、又不想写复杂 :nth-child 时，可插入一个不可见占位项，让真实首项始终不是“第一个”：
- Flex容器内最前添加一个空
- 设
.spacer { flex: 0 0 auto; width: 0; height: 0; overflow: hidden; } - 所有真实子项仍设
margin-left: 12px，此时它们的“前一项”是 spacer，首项不再触发多余左距 - 缺点：DOM结构侵入性强，SEO和可访问性略受影响，仅建议在极端动态布局中兜底
真正麻烦的不是怎么实现，而是忘记 gap 在旧版Safari里会失效，或者在用 :nth-child(3n) 时没同步更新媒体查询里的系数——这些细节一旦漏掉，换行错位就悄悄出现在某个用户屏幕上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
