结论：gap 在现代浏览器的 display: flex 容器上完全可用，但仅限于标准 flex 容器（display: flex 或 inline-flex），不支持旧前缀如 -webkit-flex，且需注意浏览器兼容性。
gap 属性在 Flex 布局中是否生效
直接说结论：gap 在现代浏览器的 display: flex 容器上完全可用，但仅限于“规范定义的 Flex 容器”——也就是 display: flex 或 display: inline-flex，不包括 display: -webkit-flex 这类旧前缀写法。
常见错误是把 gap 写在 Grid 容器里顺手复制到 Flex 里，结果发现没效果：要么浏览器太老（Chrome display: flexbox 这种已废弃的值。
-
gap不支持 IE，也不支持 Safari 14.0 及更早版本 - Flex 中
gap作用于主轴和交叉轴方向的相邻子项之间，不作用于容器边缘 - 若同时设置了
margin，gap不会覆盖或抵消它，两者叠加存在
flex-gap 与 margin 的混用风险
很多人想用 gap 替代手动给每个子项加 margin-right 或 margin-bottom，结果发现最后一行/列多出空隙，或者换行后间距错乱。
这是因为 gap 是“容器级”的间隙控制，而 margin 是“元素级”的；一旦子项自己写了 margin，就会和 gap 叠加，尤其在 flex-wrap: wrap 场景下容易视觉错位。
立即学习“前端免费学习笔记（深入）”；
- 避免在 flex 子项上同时写
margin和依赖gap布局 - 若需首尾无间隙，
gap本身不提供“排除首尾”选项，得靠伪元素或额外 wrapper 控制 - Flex 中
gap对齐逻辑比 Grid 简单：只按子项顺序等距分隔，不涉及轨道对齐
兼容性 fallback 方案怎么写才不翻车
真要支持 Safari 14.0 或 Chrome 84 以下，不能只靠 @supports (gap: 1rem) 包一层就完事——因为旧版 Flex 不识别 gap，但也不会报错，只是静默忽略，导致布局塌陷。
稳妥做法是用 @supports not (gap: 1rem) 主动降级，并确保降级后的 margin 计算准确（比如用 calc 避免累积误差）。
- 别用
gap+margin双写作为 fallback，旧浏览器会执行margin，新浏览器会叠加 - 推荐结构：
@supports (gap: 1rem) { .container { gap: 1rem; } }+ 单独写基础margin规则作为默认样式 - 注意：Safari 14.1+ 才开始支持 flex-gap，但部分 iOS 14.5 设备仍有渲染 bug，建议加
flex-shrink: 0防子项压缩变形
gap 在 flex-wrap 换行时的间距行为
gap 在 flex-wrap: wrap 下依然有效，但只控制“同一行内相邻项”和“上下行之间”的间距，不控制“行首与容器左边缘”或“行尾与右边缘”的距离。
这意味着：如果你希望每行都左右撑满，又保持项间统一间隙，仅靠 gap 不够，还得配合 justify-content: space-between 或 space-evenly ——但这两者和 gap 是正交控制，不会互相干扰。
-
gap的值在换行场景下始终是固定像素/百分比，不会随容器宽度缩放 - 当子项宽度用
%或flex: 1时，gap仍以绝对单位计算，不会挤压内容区 - 如果换行后某行子项少，
gap不会自动拉大来填满，它只管“项与项之间”，不管“行与行之间如何对齐”
gap 不具备 Grid 中 row-gap/column-gap 的独立控制能力，它只能设一个值统管两个方向。需要不同方向间距时，要么切到 Grid，要么用 margin 拆解——这时候就得小心优先级和层叠顺序了。 
