gap 是 Flex 和 Grid 布局中原生控制相邻项目间隙的属性，避免首尾空白和 margin 合并问题；支持 gap、row-gap、column-gap，现代浏览器广泛兼容，可配合 @supports 降级。
用 gap 属性就能轻松解决 Flex 布局中元素间距不均的问题，无需手动给每个子项加 margin，也不用担心首尾多出空白。
gap 是什么？为什么比 margin 更合适
gap 是 Flex（和 Grid）布局的原生属性，专门用于控制容器内**相邻项目之间的间隙**。它只作用于项目之间，不会在首项前或末项后产生额外空白，避免了传统 margin 方案常见的“首尾多空”或“父子 margin 合并”等麻烦。
在 Flex 布局中，只要容器设置了 display: flex，就可以直接使用 gap（包括 row-gap 和 column-gap），现代浏览器基本都已支持（Chrome 84+、Firefox 63+、Safari 14.1+）。
怎么用 gap 统一设置间距
直接在 Flex 容器上设置即可，写法简洁直观：
立即学习“前端免费学习笔记（深入）”；
-
gap: 12px—— 横向 + 纵向间距都设为 12px（适用于单行/单列） -
row-gap: 16px—— 仅控制行与行之间的间距（多行 Flex 时生效） -
column-gap: 8px—— 仅控制列与列之间的间距（同一行内相邻子项）
例如：
.container {
display: flex;
flex-wrap: wrap;
gap: 12px; /* 所有间隙统一为 12px */
}遇到 gap 不生效？检查这几个点
如果写了 gap 却没看到效果，常见原因有：
- 父容器没设
display: flex（或inline-flex）——gap在 Flex 或 Grid 容器中才有效 - 子项用了
margin干扰视觉效果——建议清空子项的 margin，让 gap 全权控制间距 - Flex 方向是 column 且未换行——此时
row-gap生效，column-gap无效（因为没有“列”） - 浏览器版本太老——可加
fallback：先用margin做兼容，再覆盖为gap
兼容性不足时的简单降级方案
若需支持较老浏览器（如 IE 或旧版 Safari），可用 margin 模拟 gap 效果，并用 @supports 提升现代浏览器体验：
.container {
display: flex;
margin: -6px; /* 抵消首尾外边距 */
}
.container > * {
margin: 6px;
}
@supports (gap: 12px) {
.container {
gap: 12px;
margin: 0;
}
.container > * {
margin: 0;
}
}不复杂但容易忽略。用对 gap，Flex 间距就干净又可控。
