Flex gap 属性在Chrome 84+、Firefox 63+、Safari 14.1+中真正支持，旧版Safari（如13.x）会静默忽略；IE完全不支持，需用margin等手动模拟。
Flex gap 属性在哪些浏览器里能用
Chrome 84+、Firefox 63+、Safari 14.1+ 才真正支持 gap，旧版 Safari（比如 13.x）会直接忽略它，不回退、不报错、也不影响布局——但空白就没了。如果你的项目还要兼容 iOS 13 或 macOS 10.15，就得准备 fallback。
gap 和 margin 混用时为什么空白变大了
gap 是容器级属性，只作用于 flex 项之间的间隙；而 margin 是子元素自己的外边距。两者叠加就会重复生效——比如设了 gap: 12px 又给每个子项加 margin: 8px，相邻项之间实际间距就变成 12 + 8 + 8 = 28px。
常见错误场景：
- 用
gap同时又写margin-right控制最后一项，结果末尾多出一截空白 - 响应式中用媒体查询改
gap，但忘了清掉之前写的margin，导致断点处空白突变 - 把
gap当成“所有方向都生效”的万能解，其实它不控制容器内边距（padding）
gap 在 row 和 column 方向上的行为差异
gap 是简写，等价于 row-gap + column-gap。但在单行或单列 flex 布局中，未被使用的那个方向不会产生任何效果——比如 flex-direction: row 时，column-gap 不起作用，哪怕你写了也不会报错或影响渲染。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 横向布局优先用
row-gap，避免写冗余的column-gap - 需要不同方向不同间距时，别硬套
gap简写，直接分开写row-gap: 8px和column-gap: 16px - 注意：IE 完全不支持
gap，连row-gap都不行，必须用margin+:not(:last-child)之类的手动模拟
gap 与 justify-content / align-content 的关系
gap 不会影响主轴/交叉轴对齐方式，但它会“挤占”原本可用于对齐的空间。比如 justify-content: space-between 在有 gap 时，项与项之间的净距离 = 计算出的间距 − gap 值，容易让视觉节奏变紧。
更隐蔽的问题是：align-content 在多行 flex 中才生效，而 gap 对每行内部和行与行之间都起作用。如果同时设了 gap: 12px 和 align-content: space-around，行间距会变成 “自动分配的空白 + 12px”，不是单纯两倍 gap。
所以真要匀称，得盯住两个地方：
- 项与项之间：靠
gap或margin - 行与行之间：靠
gap（多行时）或align-content（仅当行数 > 1） - 容器边缘到第一项/最后一项：只能靠
padding，gap管不了这个
gap 看似简单，但和 margin、padding、justify-content 这些属性交叠时，空白到底是哪来的、谁在起作用，很容易凭感觉误判。最稳妥的做法是打开 DevTools，逐层关掉相关样式看变化，而不是猜。
