gap属性在safari≤14.1、ios safari≤14.5及ie中完全不生效，被解析器直接忽略；可用:not(:last-child)配合单向margin模拟，但需注意文本节点、flex-wrap及百分比单位等边界问题。
gap 属性在 Safari 14.1 以下和 IE 完全不生效
Flex 容器的 gap 在 Safari ≤14.1、iOS Safari ≤14.5、IE 所有版本中被忽略——不是渲染异常，是直接被解析器丢弃。这意味着即使写了 gap: 12px，子元素依然紧贴排列，毫无间距。
根本原因在于这些浏览器尚未实现 CSS Box Alignment Module Level 1 中对 Flex 的 gap 支持（仅 Grid 在较早版本部分支持）。不能靠加前缀解决，-webkit-gap 等写法无效。
用 margin 模拟 gap：只给子项右侧/下方加间距
核心思路是避免相邻项双倍间距（比如 A 右 margin + B 左 margin = 两倍间隙），所以只在非末尾项上设置单向 margin：
- 水平布局（
flex-direction: row）：给除最后一个子项外的所有项加margin-right - 垂直布局（
flex-direction: column）：给除最后一个子项外的所有项加margin-bottom - 用
:not(:last-child)选择器最简洁，无需 JS 或额外 class
示例（水平 Flex）：
.container {
display: flex;
}
.container > *:not(:last-child) {
margin-right: 12px;
}
动态子项数量变化时 margin 方案仍可靠
只要 DOM 结构保持“子元素直系平级”，:not(:last-child) 就能自动适配新增/删除项。但要注意几个边界情况：
- 如果子项中间插入了注释节点或文本节点（如换行符被解析为
Text），:last-child可能错判——确保模板中子元素之间无空白文本节点 - 使用
flex-wrap: wrap时，margin-right会导致换行后首行末项与次行首项间距过大；此时应改用row-gap+column-gap的 polyfill（见下条） - 服务端渲染（SSR）中若子项数量在 hydrate 前后不一致，可能短暂出现错位，建议加
data-hydrated类做过渡控制
需要 wrap 场景？用 inline-block + margin 或 JS 补齐
当 Flex 启用了 flex-wrap，纯 CSS margin 方案无法区分“行内间隔”和“行间间隔”。这时有两个更稳的选择：
- 放弃 Flex，改用
display: inline-block容器 +font-size: 0消除空白符，再对子项设vertical-align: top和margin—— 兼容性极好，但失去 Flex 对齐能力 - 轻量 JS 补齐：遍历容器子项，在每行末尾项后插入占位
<div class="gap-filler"></div>，并用getComputedStyle判断换行位置（需监听resize） - 如果项目已引入 PostCSS，可用
postcss-gap-properties插件自动将gap编译为 margin 规则（但仅适用于静态子项数）
真正容易被忽略的是：gap 的百分比值（如 gap: 2%）在 margin 方案中必须转为视口或容器相关单位，而不能直接照搬——因为 margin 百分比是相对于父容器宽度计算的，行为与 gap 不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
