safari ≤14.1 不解析 gap 属性，需用 overflow: hidden、min-width: 0、box-sizing: border-box 和均分负边距（容器±8px/子项±8px）四要素模拟，并以 :nth-child(n+2) 清首项间距。
为什么 Safari 里 flex-wrap + gap 看起来“没生效”
不是没写对，是 Safari ≤14.1 根本不解析 gap——DevTools 里它显示灰色带删除线，getComputedStyle(el).gap 返回空字符串 ''，就说明浏览器压根没这属性。别信 @supports (gap: 0)，Safari 14.1 会误判为 true，但实际跳过声明，布局当场错位。
用 :not(:last-child) 加 margin-right 可行吗？
水平单行布局下可以，但一开 flex-wrap: wrap 就出问题：DOM 顺序的 :last-child 不等于视觉末尾，换行后最后一项右侧仍带 margin-right，下一行首项左侧又没抵消，导致行首多出空白。更糟的是，如果子项含文本节点（比如模板里写了换行符），:not(:last-child) 还可能错选。
- 只适用于静态、单行、无文本节点干扰的场景
- 动态增删子项时看似可靠，但 SSR hydrate 前后节点数不一致会导致短暂错位
- 必须配合
font-size: 0或display: contents清除空白符，否则文本节点参与布局
真正兼容 Safari ≤14.1 的 gap 模拟方案
必须同时满足四点，漏任何一条都可能在 iOS 14.5 设备上突然崩掉：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- Flex 容器加
overflow: hidden——否则负 margin 触发意外水平滚动条 - 每个子项加
min-width: 0——iOS Safari 默认min-width: auto，内容撑宽时直接溢出容器 - 每个子项加
box-sizing: border-box——避免padding+border导致尺寸失控 - 间隙均分：目标
gap: 16px→ 容器设margin-left: -8px; margin-right: -8px，子项设margin-left: 8px; margin-right: 8px
清除首项 margin 必须用 :nth-child(n+2)，:not(:first-child) 在旧 Safari 和 Android WebView 中不支持。
为什么不用 padding 替代 margin？
表面看更干净，但落地三类问题高频出现：
-
flex-wrap: wrap下，换行后首项会多出顶部/左侧padding，得手动用:nth-child(3n+1)清除（假设每行 3 个） - 子项若有
border，padding+border易撑破容器宽度，必须配box-sizing: border-box - 子项设
display: none时，padding仍占位，视觉间隙错乱，需 JS 同步移除 class 或改用visibility: hidden+position: absolute
真正容易被忽略的是 min-width: 0：它几乎从不被主动写，但决定了内容是否会被强制截断或触发意外换行——哪怕你把其他所有防护都加上，漏掉它，布局就可能在 iOS 14.5 设备上突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
