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