根本原因是换行后margin仍作用于每行首尾元素导致间距不均，gap可完美解决；兼容IE需用nth-child伪类清除边界margin，并注意justify-content对齐方式的影响。
flex-wrap 换行后子元素左右间距不一致的根源
根本原因不是 flex-wrap 本身，而是当子元素换行时，margin 会继续作用于每行首尾元素——比如用 margin-right 实现横向间隔，末尾元素仍会多出一个右距；换行后下一行第一个元素又带左距或右距，视觉上就出现“左边空、右边挤”或“中间宽、两边窄”的错觉。
用 gap 替代 margin 是最干净的解法
gap 是 Flex 布局原生支持的间隙控制属性，它只作用于 flex 项之间的空隙，自动避开容器边缘，且对换行完全友好。IE 不支持，但现代项目基本可直接用。
-
gap会同时控制主轴（row）和交叉轴（column）间隙，写成gap: 12px或gap: 12px 8px（纵/横） - 如果只想要横向间隙，用
row-gap；只想要纵向，用column-gap - 旧代码中若已大量使用
margin，切记先清除子元素的margin，否则gap和margin叠加会导致间距翻倍
display: flex; flex-wrap: wrap; gap: 12px;
必须兼容 IE？用 margin + 伪类精准控制边界
当无法放弃 IE 时，得手动“掐掉”每行首尾多余的 margin。常用方案是给所有子元素统一设 margin-right 和 margin-bottom，再用 :nth-child 把每行最后一个元素的 margin-right 清零，以及用 :nth-last-child 或数量预估处理最后一行。
- 假设每行最多 4 个子项，可用
:nth-child(4n)清除每行末尾的margin-right - 底部间隙用
margin-bottom统一设，再对最后若干项（如:nth-last-child(-n+4)）清空margin-bottom - 这种方案依赖子项数量规律，动态内容或响应式列数变化时容易失效
.container {
display: flex;
flex-wrap: wrap;
}
.item {
margin-right: 12px;
margin-bottom: 12px;
}
.item:nth-child(4n) {
margin-right: 0;
}
.item:nth-last-child(-n+4) {
margin-bottom: 0;
}
别忽略 justify-content 对齐方式的影响
即使用了 gap，如果容器设置了 justify-content: space-between 或 space-around，它依然会对整行做额外分配，可能掩盖或加剧视觉不均。换行后每行独立计算对齐，导致不同行内元素间距不一致。
立即学习“前端免费学习笔记（深入）”；
- 确认是否真需要
justify-content：多数换行场景应设为justify-content: flex-start（默认值），让gap主导间距 - 若需两端对齐，优先考虑用
gap+ 容器固定宽度 + 子项等宽，比依赖space-between更可控 - 特别注意响应式断点变化时，列数改变会导致
space-between的“空隙数”突变，引发跳变
gap 能绕过大部分陷阱，但一旦涉及 IE 或复杂响应逻辑，就得回到 margin 的边界计算——这时候，列数是否固定、子项是否等宽、容器宽度是否精确，每一个都成了关键变量。 
