Flex布局中gap属性并非支持所有浏览器，IE全系及Safari 14.1以下等旧版浏览器原生不支持，需借助PostCSS Flex Gap Polyfill等方案降级兼容。
flex布局中gap属性是否支持所有浏览器
不是所有浏览器都原生支持 gap 属性，尤其在旧版 Safari（row-gap 和 column-gap 单独声明；IE 则必须放弃 gap，改用 margin 模拟。
用gap实现卡片间距时为什么卡片宽度变窄了
gap 不会额外占用容器空间，但会挤压子项的可用宽度——尤其当容器设了 flex-wrap: wrap 且子项用 flex: 1 或固定百分比宽度时。此时浏览器会把 gap 纳入剩余空间计算，导致每张卡片实际宽度减小。
- 解决办法：对卡片设
flex: 0 0 calc(33.333% - 20px)（假设三列+gap: 20px），手动扣掉 gap 占位 - 或改用
flex-basis: 0+min-width控制最小尺寸，避免过度压缩 - 更稳妥的做法是：容器用
display: grid替代 flex，grid 对gap的处理更直观、无宽度副作用
gap和margin混用会导致什么问题
在 flex 容器里同时用 gap 和卡片的 margin，会出现双重间距、对齐错乱，甚至触发 margin 折叠（虽然 flex 下 margin 折叠基本失效，但左右 margin 叠加仍可能超预期）。
- 典型错误：给卡片加
margin: 10px，又设gap: 16px→ 实际横向间距变成 26px，且首尾卡片外边距无法被 gap 覆盖 - 正确做法：只用
gap，移除所有卡片的margin；如需首尾留白，改用容器的padding - 注意：
gap不作用于容器 padding 区域，所以 padding + gap 是安全叠加的
移动端下gap值该用px还是rem
推荐用 px 或 rem 都可以，但逻辑不同：px 值固定，适合控制精确视觉节奏；rem 随根字体缩放，适合响应式断点切换。不过要注意——gap 不支持百分比单位（%），写 gap: 2% 会直接失效。
立即学习“前端免费学习笔记（深入）”；
- 常见实践：小屏用
gap: 8px，中屏gap: 12px，大屏gap: 16px，配合媒体查询切换 - 若项目已统一用 rem 基准，可定义
--card-gap: 0.5rem，再写gap: var(--card-gap)，便于全局调控 - 切记：Safari 旧版本对
rem在gap中的支持略滞后，如有兼容要求，优先选px
实际用 gap 做卡片间距，最常被忽略的是它和 flex-wrap 的交互细节——比如两行卡片之间 vertical gap 是否均匀，取决于容器高度是否恰好容纳整数行；稍有不足，最后一行会被拉伸或换行异常。这种边界情况，光靠 gap 很难调准，往往得结合 align-content 或改用 grid。
