gap必须配合flex-wrap: wrap才能跨浏览器稳定生效，否则Safari 14.1–15.6及部分安卓WebView会忽略它；Computed Styles中gap显示为0px或未计算即为此因。
直接用 gap，但必须加 flex-wrap: wrap 才能跨浏览器稳定生效——否则 Safari 14.1–15.6、部分安卓 WebView 会完全忽略它，Computed Styles 里显示为 0px 或未计算。
为什么 gap 设了却没效果？先看 flex-wrap
这不是写错单位或漏分号的问题，而是浏览器解析逻辑卡在 flex-wrap 上：gap 在 flex-wrap: nowrap 下，Chrome/Firefox 支持，但 Safari ≤15.6 不识别，连属性都不进 layout 计算。只要加上 flex-wrap: wrap，所有现代浏览器（含 Safari 15.4+）才真正启用 gap。
- 检查方式：DevTools → Computed → 搜索
gap，若值为空、normal或0px，基本就是flex-wrap缺失 - 不想真换行？可以加
min-width: 100%或flex: 0 0 calc(33.333% - 12px)配合justify-content: center，视觉上仍是单行，gap却有效 - 注意：IE 完全不支持
gap，老 WebView 常有渲染异常，不能只靠加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，子项会紧贴——要关就删掉那一项，或单独写column-gap: 0
gap 和 margin 能不能混用？小心双倍空白
gap 是容器级控制，不参与子项盒模型；margin 是子项自身属性，会触发重排、影响对齐基准线。二者共存时，gap 优先级更高，但 margin 不会被覆盖——而是“叠在 gap 外面”。
- 容器设
gap: 10px，某个子项又写margin-right: 10px→ 右侧实际空出20px - 用
justify-content: center时，给第一个子项加margin-left会让整行左偏，居中失效 - 如需不对称留白（比如只让某几个子项右移），优先用
margin，但同步把对应方向的gap设为0 - 避免给所有子项统一加
margin-right：会导致末项多出右边距，破坏对齐
三列布局设了 gap 却换行？宽度没扣间隙
设了 gap: 16px 但子项还是挤成两行？大概率是子项宽度没动态扣除 gap 占用的空间。例如三列布局，每个子项设 flex: 0 0 33%，加上两处 16px 间隙，总宽 = 3 × 33% + 2 × 16px > 100%，浏览器只能换行或压缩。
- 正确做法：用
calc()动态扣除，如flex: 0 0 calc((100% / 3) - 16px)—— 注意这里减的是完整16px，不是一半，因为gap是列间距离，每项需承担一次间隙扣除 - 列数变，分母跟着变；
gap值改，减数也得改 - 媒体查询里改了
gap，对应子项的calc()必须重写，不能只靠继承 - 如果子项用了
flex-grow: 1或minmax()，gap仍生效，但宽度不再可控——此时别硬撑 Flex，切display: grid更稳
最常被忽略的点是：gap 的生效前提不是“写了就行”，而是“写了 + flex-wrap: wrap + 宽度同步算”。三者缺一，都可能让你在 Safari 里反复刷新、怀疑 CSS 生效逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
