直接用gap替代margin并配合flex-wrap:wrap是唯一能绕过换行后间距错位的原生方案；因margin在换行时仍机械作用于DOM顺序首尾元素导致视觉错位，而gap自动避开容器边缘、仅作用于项间，需display:flex和flex-wrap:wrap共同生效。
直接用 gap 替代所有子项的 margin，并确保父容器同时声明 display: flex 和 flex-wrap: wrap —— 这是唯一能绕过换行后间距错位的原生方案。
为什么 margin 在列表项中必然出问题
浏览器按 DOM 顺序逐个渲染元素，margin-right 和 margin-bottom 不会因为换行就“自动收住”。比如一行末尾的 li 带 margin-right: 12px，下一行开头的 li 又带 margin-left: 12px，视觉上左边空、右边挤；更糟的是，:nth-child(3n) 这类选择器只认 DOM 序号，不认视觉行尾，列数一变规则全崩。
常见错误现象包括：
- 最后一行右侧多出空白，或首行左侧留白异常
- 响应式缩放后某些项突然掉行，间距忽大忽小
- 子项高度不一致时，行基线错位，看起来“上下不对齐”
用 gap 的硬性前提和写法陷阱
gap 不是写了就有，它对容器声明极其敏感：
立即学习“前端免费学习笔记（深入）”；
- 必须同时存在：
display: flex和flex-wrap: wrap（缺一不可；只写flex-wrap，浏览器直接忽略gap） - 优先拆开写：
row-gap: 12px+column-gap: 8px；避免gap: 12px 8px或gap: 12px简写（微信 X5 内核等旧 WebView 解析不稳定） -
row-gap在flex-direction: column下控制的是“列间距”，不是“行间距”——此时它根本不管换行 - 单位必须是绝对或相对长度（如
px、rem），row-gap: 5%会被静默忽略
兼容性差时怎么降级
Safari ≤13.1 和 IE 全系不支持 gap，但硬套 @supports (gap: 1px) 也不可靠（Safari 14.1 才开始支持，14–15.4 还有渲染抖动）：
- 改用
@supports (row-gap: 1px)更稳妥 - 伪元素兜底要配负
margin：.container { margin: -6px; }+.item { padding: 6px; }（模拟gap: 12px），而非保留margin再覆盖 - IE10–11 必须用负边距法：
.container { margin-right: -12px; }+.item { margin-right: 12px; }，且所有子项必须显式设flex-basis（如flex: 0 0 calc(50% - 12px)）
别踩这些坑
真正难处理的从来不是怎么加间隙，而是让浏览器相信“这一行结束了”。调试前先确认三件事：
- Computed Styles 里
flex-wrap真是wrap吗？ - 容器交叉轴（垂直方向）有没有固定高度？
align-items: stretch可能让子项被拉高，造成“假换行” - 子项真的换行了，还是只是内容溢出导致的视觉错觉？
如果子项高度差异大（比如图文混排），统一 min-height 或用 aspect-ratio 约束图片，比硬调 align-content 更可靠。
