gap比margin更可靠，因其是布局层原生间隔控制，不参与盒模型计算，不触发重排、不影响justify-content对齐；而margin模拟易在动态增删或响应式时出错，且无法实现容器边缘留白。
Flex容器中gap为什么比margin更可靠
因为gap是布局层原生间隔控制，不参与盒模型计算，不会触发重排或影响justify-content对齐逻辑；而用margin模拟等距（比如给每个子项加margin-right再用:last-child清除）容易在动态增删项、响应式断点切换时漏掉清除规则，导致末尾多出空白或对齐偏移。
常见错误现象：justify-content: space-between在只有2个子项时看似正常，但加到3个以上就发现首尾紧贴容器、中间间隔变大——这不是你想要的“等距”，而是space-between的语义行为。
-
gap只作用于flex item之间，不作用于容器边缘，语义清晰 - 支持
row-gap和column-gap独立设置，响应式中可分别控制 - IE完全不支持，如需兼容IE11，必须降级为
margin方案（无自动fallback）
Flex列表启用gap的最小必要配置
只需两步：声明display: flex，再设置gap值。不需要额外包裹、伪元素或JS干预。
.list {
display: flex;
flex-wrap: wrap;
gap: 12px; /* 横向纵向都生效 */
}
注意：gap在flex-direction: column时控制的是垂直间距，在row时控制水平间距；若需不同方向不同值，改用row-gap: 8px; column-gap: 16px;。
- 单位支持
px、rem、%（百分比基于容器内联尺寸，慎用） - 设为
0或unset可关闭间隔，比批量重置margin干净得多 - 当
flex-wrap: wrap存在时，gap同样作用于换行后的上下行之间
与margin方案对比：哪些场景gap会失效
gap不能替代所有margin用途——它只管“item之间”，不管“item与容器之间”。如果你需要首项左边留白、末项右边留白（即模拟padding效果），gap做不到，仍得靠容器padding或子项margin。
典型陷阱：gap: 10px后发现列表整体左顶边，误以为间隔没生效——其实是容器缺padding-left。
- 无法实现“奇数项左空、偶数项右空”这类不对称间隔
- 不能配合
align-self单独调整某个item的外边距 - 当item本身有
margin时，gap与margin共存，但不会合并或抵消，而是叠加显示（可能造成意外过宽）
响应式中动态控制gap的实用写法
直接在媒体查询里覆盖gap值即可，无需重复写整个flex结构。比维护多套margin类名清爽得多。
.list {
display: flex;
gap: 8px;
}
<p>@media (min-width: 768px) {
.list {
gap: 16px;
}
}</p><p>@media (min-width: 1024px) {
.list {
row-gap: 20px;
column-gap: 24px;
}
}</p>
性能提示：gap变更不会触发layout thrashing，浏览器可直接合成更新；而频繁修改大量item的margin可能引发重排。
真正容易被忽略的是：当flex容器使用align-content: flex-start（默认值）且有多行时，row-gap只在行与行之间生效，但第一行顶部、最后一行底部依然紧贴容器——这并非bug，而是gap的设计边界。需要撑开上下留白，还是得靠容器padding。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
