gap比margin更可靠，因gap是容器级属性，仅在相邻子项间插入固定间隙，不触发外边距合并、不受flex-wrap换行影响、不依赖DOM顺序，且天然避开首尾及容器边缘。
直接用 gap，别碰 margin —— 只要父容器是 display: flex 且启用了换行（flex-wrap: wrap），gap 就能稳定产出固定间距，不依赖元素顺序、不触发外边距合并、也不受对齐属性干扰。
为什么 gap 比 margin 更可靠
给每个子项加 margin-right 或 margin-bottom 看似简单，但实际会暴露一堆边界问题：
- 换行后最后一项右侧/底部仍留空隙，视觉上“多出一格”
-
:not(:last-child)在响应式换行时失效——DOM 顺序没变，但视觉“最后一项”已不同 -
justify-content: space-between和margin冲突，导致间距计算错乱 - 动态插入或删除子项时，
margin逻辑需 JS 配合重算，gap完全无感
gap 是容器级控制：它只在相邻项目之间插入间隙，天然避开首项前、末项后、容器边缘，也不参与盒模型计算。
gap 在单行和多行 Flex 中的行为差异
很多人以为写了 gap: 16px 就万事大吉，结果换行后“行与行之间没空隙”——其实是没理解 gap 的生效前提：
立即学习“前端免费学习笔记（深入）”；
- 未启用
flex-wrap: wrap时：row-gap不生效（只有一行），column-gap控制主轴方向间距 - 启用
flex-wrap: wrap后：gap: 16px等价于row-gap: 16px; column-gap: 16px，即同时控制行间和列间 - 若只要列间距大、行间距小，拆开写更安全：
row-gap: 8px; column-gap: 24px
注意：align-content（如 flex-start）会影响多行的垂直分布，但不会取消 row-gap；如果看起来“没空隙”，大概率是容器高度不够撑开行距。
兼容性差的老环境怎么降级
IE 全系不支持 gap，旧版 Safari（≤14.1）对 row-gap 在 Flex 中的支持也不完整。不能只靠 @supports (gap: 1rem)，因为某些安卓 WebView 里 @supports 本身返回假值。
- 渐进增强优先：现代项目直接写
gap，不写降级样式，让老浏览器自然回退为紧凑排列 - 必须兼容 IE？放弃
gap，改用margin+:not(:last-child)，但仅限横向或纵向单向布局：.item:not(:last-child) { margin-right: 16px; } - 避免混合使用：
gap和margin同时存在会导致间距叠加，调试时容易误判
真正麻烦的是那些既要求响应式换行、又强制兼容 IE 的场景——这时候建议整体迁移到 Grid，它的 gap 行为更稳定，且 auto-fit + minmax() 组合比 Flex 更适合动态列数。
gap 和 flex-basis 配合才能真·整齐
只设 gap 能解决“间距一致”，但解决不了“列宽不一导致视觉错位”。比如内容长短差异大，或容器宽度不能被整除时，最后一行可能只剩一个窄项，左右空荡。
- 加
flex-basis锁定基础宽度：.item { flex: 1 1 300px; }，让每项有明确起始尺寸 - 配合
min-width防止压缩变形：.item { min-width: 200px; } - 完整写法：
.container { display: flex; flex-wrap: wrap; gap: 20px; }+.item { flex: 1 1 300px; min-width: 200px; }
这个组合才是应对“多列间距不统一”的实际解法——gap 管空隙，flex-basis 管尺寸，两者缺一不可。很多人卡在只调 gap 却忽略子项宽度弹性，结果还是错位。
