gap在Flex布局中需配合flex-wrap: wrap才能稳定生效，否则Safari≤15.6等浏览器会忽略；双值语法gap: 8px 12px表示row-gap为8px、column-gap为12px；子项宽度须扣除gap值避免换行导致“失效”。
gap 在 Flex 布局中不能直接用，必须配 flex-wrap: wrap 才能稳定生效——否则 Safari 14.1–15.6、部分安卓 WebView 会忽略它，不是你写错了。
为什么设了 gap 却没空隙？
常见现象包括：DevTools 的 Computed Styles 里 gap 显示为 0px 或未计算；子项紧贴，像没设过；Layout 标签里完全不渲染间隙。
- 根本原因不是语法错误，而是浏览器兼容逻辑卡在
flex-wrap上：gap在单行布局（flex-wrap: nowrap）下，Chrome/Firefox 支持，但 Safari ≤15.6 完全不认 - 只有显式声明
flex-wrap: wrap，所有现代浏览器（含 Safari 15.4+）才真正启用gap计算 - 临时绕过换行视觉需求？加
min-width: 100%或flex: 0 0 auto可阻止折行，gap依然有效
gap: 8px 12px 的顺序和含义
双值写法不是“上下/左右”，而是严格按 Flex 轴向：第一个是 row-gap（主轴垂直方向），第二个是 column-gap（主轴水平方向）。
-
gap: 8px 12px→ 行间距 8px，列间距 12px -
gap: 8px 0不是“禁用列间距”，而是真把列间距设为 0，子项会横向贴死 - 想只控制一个方向？直接用
row-gap: 8px或column-gap: 12px，语义更清晰，也避免误读 - 三值、四值语法不合法，
gap: 8px 12px 16px会被整个忽略
子项宽度不调，gap 就会“失效”
这不是 gap 问题，是总宽度超限导致浏览器自动压缩或换行，间隙被视觉吞掉。
立即学习“前端免费学习笔记（深入）”；
- 三列布局配
gap: 10px，就不能再写flex: 0 0 33%——要改成flex: 0 0 calc((100% / 3) - 10px) - 更通用写法：
flex: 0 0 calc((100% - 2 * 10px) / 3)（3 列有 2 处间隙） - 媒体查询里改了
gap，对应子项的calc()必须重写，不能靠继承 - 如果用了
flex-grow: 1或minmax()，宽度不可控，此时建议切display: grid
gap 和 margin 混用的真实效果
两者不抵消、不覆盖，而是直接叠加——gap 是容器级控制，margin 是子项自身属性，都会参与最终渲染。
- 容器设
gap: 10px，某子项又加margin-right: 10px→ 实际右边空出 20px - 用
justify-content: center时，给首项加margin-left会导致整行左偏 - 需要不对称留白？优先用
margin，但同步把对应方向的gap设为0，防止双倍空白 - IE 完全不支持
gap，降级方案不是简单加margin，而是成对处理：:not(:last-child)加边距 + 父容器负边距抵消溢出
最容易被忽略的是：gap 本身不改变子项盒模型，也不影响 justify-content 或 align-items 的计算基准——但它要求你同步管理子项宽度、明确浏览器断点、并在混用时主动做减法。
