ie11完全不支持gap属性，包括row-gap、column-gap及所有前缀形式；必须用margin降级，配合:not(:last-child)或postcss插件处理，并注意flex-basis计算差异。
IE11 完全不支持 gap，连 -ms-gap 都是非法属性，写上去等于没写——必须用 margin 降级，且需配合特性检测隔离规则。
为什么 gap 在 IE11 里完全无效
IE11 的 CSS 解析器根本没见过 gap 这个声明，遇到就直接跳过，控制台不报错、DevTools 里该行显示为灰色带删除线，getComputedStyle(el).gap 返回空字符串。这不是渲染 bug，也不是优先级问题，而是语法层面未实现。所有变体（row-gap、column-gap、gap）全军覆没，加任何前缀（-ms-、-webkit-）都无效。
用 :not(:last-child) + margin 是最轻量的降级方案
仅适用于 flex-direction: row 且 flex-wrap: nowrap 的简单列表：
-
.container { display: -ms-flexbox; display: flex; }—— 必须双写，否则 IE11 当作普通 block -
.container > *:not(:last-child) { margin-right: 12px; }—— 只给非末项加右间距，避免双倍间隙 - 确保子元素之间无文本节点（如换行符、空格），否则
:last-child判定会出错 - 若子项用了
flex: 1或百分比宽度，margin-right会干扰剩余空间分配，此时应改用固定flex-basis，例如flex: 0 0 calc(33.333% - 8px)
遇到 flex-wrap: wrap 就别硬扛 CSS
纯 CSS 无法可靠识别“每行末尾”，:not(:last-child) 在换行后失效，会导致次行首项被多加一次 margin-right，视觉上向右偏移。此时有两条路：
- 放弃 Flex，改用
display: inline-block：父容器设font-size: 0消除空白间隙，子项设vertical-align: top和margin-right: 12px，再用calc()控制宽度 - 轻量 JS 补齐：监听容器尺寸变化，用
getBoundingClientRect()判断子项 y 坐标是否变化，在每行末尾动态插入<div class="gap-filler"></div>，并配data-hydrated类防 SSR 错位
构建流程中推荐 postcss-gap-properties
如果你已接入 PostCSS，这是最省心的方案：
- 它在编译期把
gap: 12px拆成容器负 margin + 子项正向 margin 组合，能处理嵌套、百分比单位和flex-wrap - 注意它不生成
-ms-前缀，需额外配autoprefixer补全display: -ms-flexbox等基础语法 - 对动态增删子项的场景仍可能漏算，上线前务必在真实 IE11 环境验证 DOM 变化后的间隙表现
真正容易被忽略的是：IE11 对 flex-basis 的计算逻辑和现代浏览器不同，哪怕 margin 方案写对了，只要子项用了 flex: 1 或 flex-basis: content，间隙就可能错位或消失——这时候不是 gap 的问题，是整个 Flex 计算链在旧引擎里跑歪了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
