gap在safari 14.1–15.6中设了无效，根本原因是必须声明flex-wrap: wrap才解析gap，即使单行显示也需添加；否则gap被完全忽略，computed styles显示0px或未计算。
gap在Flex容器里设了却没效果？先看flex-wrap
直接写 display: flex; gap: 12px; 在 Safari 14.1–15.6 中大概率不生效——computed styles 里 gap 显示为 0px 或未计算，不是单位漏了，是浏览器根本没解析它。
关键原因：这些旧版 Safari 要求 Flex 容器必须声明 flex-wrap: wrap 才识别 gap，哪怕你视觉上只想单行显示。
- Chrome/Firefox 支持单行（
flex-wrap: nowrap）下gap，但统一加flex-wrap: wrap是最省心的跨浏览器写法 - 不想真换行？可以给子项加
min-width: 0或用flex: 0 0 calc(33.333% - 8px)配合justify-content: center实现视觉单行 - 检查方式：打开 DevTools → Computed → 搜索
gap，若值为空或为normal，基本就是flex-wrap缺失
gap: 12px 8px 到底哪边是行距、哪边是列距？
gap 的双值写法始终是 row-gap column-gap，和 flex-direction 无关，只由布局轴向决定：
- 横向排列（
flex-direction: row）时：row-gap控制垂直方向（行间）间距，column-gap控制水平方向（元素间）间距 - 纵向排列（
flex-direction: column）时：row-gap仍控制垂直方向（即“行”方向）间距，column-gap控制水平方向间距 -
gap: 8px 0不是“禁用列间距”，而是真把列间距设成0px，子项会紧贴——别靠0来“关闭”，要关就删掉那一项或用column-gap: 0单独覆盖
gap 和 margin 一起用，空白会翻倍
gap 是容器级控制，margin 是子项自身属性，二者不冲突但会叠加——空白是相加，不是替换。
- 容器设
gap: 10px，某个子项又写margin-right: 10px→ 右侧实际空出20px - 用
justify-content: center时，给第一个子项加margin-left会让整行左偏，居中失效 - 卡片列表中个别卡片加了
margin-bottom做强调，结果和gap叠加，底部多出一倍空白 - 真要差异化留白，优先改子项
margin，并同步把对应方向的gap设为0
三列布局设了gap却换行？宽度没扣间隙
设了 gap: 16px 但子项还是挤成两行？大概率是子项宽度没动态扣除 gap 占用的空间。
- 例如三列布局，每个子项设
flex: 0 0 33%，加上两处16px间隙，总宽 =3 × 33% + 2 × 16px > 100%，浏览器只能换行或压缩 - 正确做法：用
calc()动态减去间隙，如flex: 0 0 calc((100% / 3) - 16px)——注意这里减的是完整16px，不是一半，因为gap是列间距离，每项需承担一次间隙扣除 - 如果子项用了
flex: 1或flex-grow，则无需手动算calc，但要注意flex-basis是否已隐含固定宽度
真正容易被忽略的，是 flex-wrap: wrap 这个看似无关的声明——它不是可选项，而是 Safari 下 gap 生效的硬性前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
