gap属性在safari 14.1–15.6中需配合flex-wrap: wrap才生效，单行flex下不支持；双值语法gap: 8px 12px分别控制row-gap和column-gap；gap与margin叠加易致布局异常，建议统一用gap并慎用margin。
gap属性必须配合flex-wrap: wrap才能在Safari中生效
直接写 display: flex; gap: 12px; 在 Chrome/Firefox 看起来正常，但在 Safari 14.1–15.6 里可能完全不生效——computed styles 中 gap 值显示为 0px 或未计算。这不是你写错了，是 Safari 早期对单行 Flex（flex-wrap: nowrap）下 gap 的支持缺失。
解决办法很简单但容易被忽略：
- 强制加
flex-wrap: wrap，哪怕你只想要一行布局 - 为子项设
min-width: 0或具体宽度，防止换行（例如flex: 0 0 auto） - 或者用
flex-wrap: wrap; min-width: 100%配合justify-content: center实现视觉单行 + gap 可用
gap双值语法比单值更可控，别乱用 0
gap: 8px 12px 是标准写法：第一值是 row-gap（行间距），第二值是 column-gap（列间距）。它不是“上下/左右”，而是严格对应 Flex/Grid 的轴向逻辑。
常见误操作：
- 写成
gap: 8px 0想“只留横向间隙”，结果真把列间距设成 0，子项贴在一起——0是有效值，不是“禁用” - 在 Grid 中用
gap: 1rem单值，结果行列都变成 1rem，但移动端可能需要更小的行距 - 混用
row-gap和gap，后者会覆盖前者，调试时容易困惑
gap和margin同时存在时，空白会叠加
gap 是容器级控制，margin 是子元素自身属性。两者不冲突，但会叠加——比如容器设了 gap: 10px，某个子项又写了 margin-right: 10px，那它右边实际空出 20px。
这在以下场景特别容易翻车：
- 用
justify-content: center时，给第一个子项加margin-left，整行会左偏，居中失效 - 卡片列表中个别卡片加了
margin-bottom做强调，结果和gap叠加导致底部多出一倍空白 - 响应式断点里只调了
gap，忘了清掉之前写的margin，造成意外溢出
建议：统一用 gap 控制常规间距；真要差异化，优先改子项 margin 并同步把对应方向的 gap 设为 0。
Grid中gap不会影响容器边缘，但要注意轨道宽度分配
gap 在 Grid 中只作用于网格线之间，不会让子项离容器边框更远——这点和 padding 有本质区别。所以如果你发现子项紧贴容器上边或左边，不是 gap 没起作用，而是你没给容器设 padding。
真正容易卡住的地方是尺寸计算：
- 当用
grid-template-columns: repeat(3, 1fr)+gap: 20px，浏览器会先分三等份，再在每两列之间插入 20px 间隙，总宽度 = 3×列宽 + 2×20px - 如果子项自己设了
width: 100%又加了padding或border，而没写box-sizing: border-box，就可能撑破轨道 - 移动端用
gap: 1svh动态适配时，注意svh在 Safari 中支持较晚（iOS 16.4+），旧版会回退到 0
gap 看似一行代码就搞定，但它背后牵扯的是布局模型、浏览器实现差异和盒模型计算。最常被跳过的一步，就是检查 flex-wrap 是否真的启用了——尤其当你在 Safari 里反复刷新却看不到间隙时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
