gap属性在现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+）中可原生使用，旧版Safari需回退方案；需注意子项须为连续兄弟元素，且gap与padding叠加计算视觉间距。
gap 属性在 Flex 布局中到底能不能用
能用，但得看浏览器版本。现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+）原生支持 gap，旧版 Safari（
常见错误现象：gap: 1rem 写了但子元素紧贴在一起，检查 computed styles 会发现 gap 值显示为 normal 或空，这就是不支持的信号。
- Flex 容器必须声明
display: flex或display: inline-flex，gap才生效 - 不要和
margin混用：比如给子项加margin-right再设gap，会导致间距叠加，视觉过宽 -
gap是容器级控制，无法对某一个子项单独跳过或覆盖
gap 和 margin 做间距，哪个更稳
gap 更干净，margin 更兼容。关键区别不在“能不能”，而在“谁负责清除副作用”。
使用场景：如果项目需支持 iOS 13 / Safari 13（如企业内网系统），gap 就不能单独依赖；若目标环境明确是 Chrome/Firefox 最新版或 Electron 应用，gap 是首选。
立即学习“前端免费学习笔记（深入）”；
-
gap不触发外边距合并（margin collapse），也不影响元素尺寸计算（不占 box-sizing 范围） -
margin在 Flex 中容易因align-items或换行导致对齐偏移，尤其当子项高度不一致时 - 性能上无差异，但
gap减少了 CSS 选择器数量和重排可能性（少写 nth-child 规则）
gap 在 Flex 换行（flex-wrap）时的行为
gap 对行与行之间也生效，但仅限于相邻行之间的垂直间距（即 row-gap 效果），不会在末尾多出一行空白。
容易踩的坑：有人以为 gap: 1rem 只作用于同层兄弟元素，实际上它等价于 row-gap: 1rem; column-gap: 1rem，只要布局轴方向上有“断开”，就会插入间隙。
- 当
flex-direction: column且启用flex-wrap: wrap，gap依然按列方向插入，但此时“列”可能变成视觉上的多行块 - 不支持
gap的浏览器中，flex-wrap下用margin很难精准控制跨行间距，常出现最后一行右边空隙不对齐 - 避免同时设置
gap和justify-content: space-between，后者可能让首尾子项贴边，而gap还在中间撑开，视觉割裂
兜底方案怎么写才不冗余
不用 JS 检测，纯 CSS 即可降级。核心思路：先写 margin 兜底，再用 @supports 覆盖为 gap。
container {
display: flex;
/* 兜底：用 margin 模拟 gap */
> * + * {
margin-left: 1rem;
}
}
<p>@supports (gap: 1rem) {
container {
gap: 1rem;</p><blockquote><ul><li><ul><li><ul><li>{
margin-left: 0;
}
}
}注意：这个写法要求子项是连续兄弟元素；如果中间有注释、文本节点或非元素节点，+ * 会断掉，建议配合类名约束，例如 .item + .item。
真正容易被忽略的是：当 Flex 容器本身有 padding，又用了 gap，别忘了 padding 和 gap 是叠加的——视觉间距 = padding + gap，而不是替代关系。
