Safari 14.1以下及IE不支持flex-gap，需用负margin+padding模拟：容器设负边距，子项设正padding，注意flex-wrap换行、border、display:none等限制，并添加min-width:0防溢出。
flex-gap 在 Safari 14.1 以下和 IE 完全不生效
直接写
、
或
在 flex 容器上，Safari ≤14.1、iOS Safari ≤14.5、IE 以及部分安卓 WebView 会完全忽略——不是表现异常，是压根不解析。这不是“渲染错位”，而是样式被
浏览器
引擎跳过。
现代方案（如
替代）在必须用 flex 的场景下不可行；而 Autoprefixer 对
无能为力，它不生成 polyfill，只处理已知前缀属性。
用负 margin 模拟 gap：核心是“容器外扩，子项内缩”
原理很简单：让 flex 容器左右/上下各加一半 gap 值的负 margin，再给每个子项加对应方向的正 padding，视觉间距就出来了。关键在于父子边距抵消，布局流不受影响。
→ 容器设
，子项设
仅水平 gap：容器
，子项
仅垂直 gap：容器
，子项
注意：子项需是直接子元素，且不能有自身 margin 干扰（否则要额外重置）
padding 方案的三个硬限制必须手动绕过
这个方案看着简单，但实际落地时三类问题高频出现：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
下，换行后的首项会多出顶部/左侧 padding —— 解决办法是用
选择器清除首行/首列的冗余边距，例如：
（假设每行 3 个）
子项有
时，padding + border 可能撑大尺寸，建议统一用
当子项本身需要响应式隐藏（如
），它的 padding 仍占位 —— 必须配合 JS 移除对应元素的 class，或改用 visibility + absolute 定位规避
要不要加 @supports 检测？多数情况下没必要
加
包一层再 fallback，看似严谨，但实际增加了 CSS 体积和维护成本，且无法覆盖 Safari 14.1 这种“支持 gap 但存在严重渲染 bug”的中间态版本（比如 gap 在 flex-wrap 下错位）。更务实的做法是：项目明确支持 Safari 14.1+ 时才启用原生
；否则全局走负 margin 方案，用 PostCSS 插件自动注入兼容代码更可靠。
真正容易被忽略的是子项的
—— flex 子项默认不收缩，加上 padding 后更容易溢出容器。只要用了 padding 模拟 gap，顺手给子项加一句
（或
垂直场景），能省掉一大半莫名换行或横向滚动条的问题。
gaprow-gapcolumn-gapdisplay: gridgapgap: 16pxmargin: -8pxpadding: 8pxmargin-left: -8px; margin-right: -8pxpadding-left: 8px; padding-right: 8pxmargin-top: -8px; margin-bottom: -8pxpadding-top: 8px; padding-bottom: 8pxflex-wrap: wrap:nth-child().container > *:nth-child(3n+1) { padding-left: 0; }borderbox-sizing: border-boxdisplay: none@supports (gap: 0)gapmin-width: 0min-width: 0min-height: 0