gap在safari≤14.1、ie全系、ios safari≤14.5中完全不被解析，需用margin-left+:nth-child(n+2)模拟并设flex-shrink:0和min-width:0，或使用postcss flex-gap-polyfill自动转译。
直接用 gap 写 CSS，在 Safari ≤14.1、IE 全系、iOS Safari ≤14.5 等浏览器里就是无效的——不是渲染错，是解析器压根不认这个属性。别浪费时间加前缀或改写法，-webkit-gap 也起不了作用。
怎么快速确认 gap 真的没生效
别靠猜，三步实锤：
- DevTools → Styles 面板中选中 flex 容器，
gap显示灰色或带删除线 - Computed 面板搜
gap，值为空字符串''或标着not supported - 控制台执行
getComputedStyle(el).gap，返回''或'normal'
特别注意：Safari 14.1 是“伪支持”陷阱——@supports (gap: 0) 会返回 true，但实际在 flex-wrap 场景下布局直接错位。
用 margin-left + :nth-child(n+2) 模拟水平 gap
这是目前最稳、兼容性最好、无需 JS 的纯 CSS 方案，尤其适合动态子项数量变化的场景。
- 只给非首项加
margin-left，避免换行后首项多出空白 - 必须用
:nth-child(n+2)，而不是:not(:first-child)——后者在 iOS Safari 13.x 和 Android WebView 75 中会失效 - 子项必须设
flex-shrink: 0，否则长文本或图片会压缩，把margin-left“吃掉” - 间隙值走 CSS 变量，比如
--gap: 12px，方便后续响应式调整 - 如果子项有
border或padding，记得在margin-left值里预留空间，否则视觉间距不准
示例：
:root { --gap: 12px; }
.flex-row { display: flex; }
.flex-row .item {
margin-left: var(--gap);
flex-shrink: 0;
}
.flex-row .item:nth-child(1) {
margin-left: 0;
}
PostCSS 插件自动处理比手写更可靠
如果你项目已用 PostCSS（绝大多数现代前端工程都用了），flex-gap-polyfill 是比手动写 margin 更可持续的选择。
- 它会在构建时把
gap、row-gap、column-gap自动转成兼容代码，不增加运行时开销 - 支持嵌套 flex 容器、
flex-wrap多行场景，且能正确处理justify-content: center等对齐逻辑 - 配置极简：
postcss.config.js里加一行require('flex-gap-polyfill')即可 - 不用改 HTML 结构，也不用加额外 class，开发时仍写原生
gap，体验零割裂
真正容易被忽略的是子项的 min-width: 0——flex 子项默认不收缩，加上 padding 或 margin 后极易溢出容器，这个细节几乎从不在文档里强调，但线上 bug 经常由此触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
