gap在旧版flexbox中不被支持，仅现代浏览器（chrome 84+等）生效；ie及edge 17–18完全不支持，低版本需用margin模拟，且gap与margin混用会导致间距叠加。
gap属性在flex布局中为什么不起作用
因为gap在旧版Flexbox规范中不被支持，只有启用了“现代Flexbox”（即使用display: flex且浏览器版本较新）才生效。Chrome 84+、Firefox 63+、Safari 14.1+ 支持，但IE完全不支持，Edge 17–18 也不支持。
常见错误现象：gap: 12px写在display: flex容器上，子元素却紧贴在一起，控制台无报错，样式面板里该属性被划掉（invalid）。
- 确认浏览器是否达标，低版本需回退到
margin模拟 - 不能写在
display: inline-flex的旧引擎环境（如某些微信内置浏览器），表现不稳定 - 注意不要和
row-gap/column-gap混用——三者共存时，gap会覆盖后两者
flex布局中gap与margin混用的冲突点
当同时用gap和子项margin时，空隙会叠加，容易造成间距翻倍或对齐错乱。这不是bug，是规范明确的行为：gap是容器级间隙，margin是子项自身外边距，二者不互斥也不替代。
使用场景：想给首尾子项“减边距”，但又想用gap统一中间间隔——这时直接靠gap做不到，必须配合选择器处理。
- 避免对flex子项写
margin-right或margin-bottom来模拟gap - 若需首尾无空隙，用
:first-child和:last-child清除对应方向margin，gap照常设 - 在响应式中，
gap可配合min()或clamp()动态缩放，但margin做不到这点
gap在flex与grid中的行为差异
gap语法一致，但实际渲染逻辑不同：在display: grid中，gap严格作用于网格轨道之间；而在display: flex中，它只作用于主轴相邻子项之间（即不会在换行后的行与行之间加空隙，除非是flex-wrap: wrap + row-gap）。
参数差异：gap: 8px 12px在flex中等价于row-gap: 8px; column-gap: 12px，但仅当启用多行（wrap）时row-gap才有效。
- 单行flex下，
row-gap无效，gap的纵向值会被忽略 - grid中无论几行几列，
gap两个值都始终生效 - 性能上无差异，但flex下滥用
row-gap可能引发意外交互（比如误以为能控制垂直对齐间距）
兼容性 fallback 方案怎么写才不冗余
不能只靠@supports (gap: 0)包裹，因为部分浏览器（如Safari 13.1）虽识别gap但实现有缺陷，导致换行后row-gap失效。
真正稳妥的做法是：用gap为主，再用margin做降级，但通过选择器精准抵消首尾干扰。
- 给flex容器设
gap: 12px - 同时给子项设
margin: 0 -6px（负半gap），再用> :first-child和> :last-child补回边距 - 或者更简单：只在支持
gap且flex-wrap: wrap的场景下启用，其余一律用margin，用JS检测CSS.supports('gap', '1px')动态切类名
复杂点在于：gap本身不解决“最后一行对齐”问题，比如三列flex-wrap下，第四项换行后左侧悬空——这得靠justify-content: space-between或伪元素填补，和gap无关，但很多人会误以为是gap没起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
