Flex布局中应优先使用gap而非margin控制子项间距，因margin易导致首尾多余空白、换行对齐错乱及兼容性问题；gap自动跳过首尾、响应式友好且语义清晰，IE11等旧浏览器可通过@supports进行特性检测降级处理。
Flex 布局中所谓的“边距塌陷”其实不是标准术语，常见的是 相邻子项的 margin 合并（margin collapse）不生效，或更典型的情况：在 flex 容器中用 margin 控制子项间距时，首尾项多出额外空白、换行后对齐错乱、响应式下间距失控，甚至 IE/Firefox 旧版本表现不一致——这本质是 margin 在 flex 中行为受限 + 浏览器兼容差异导致的“视觉塌陷感”。真正推荐的解法是：优先用 gap。
为什么 flex 里 margin 容易“出问题”
flex 容器默认不触发块级元素的 margin collapse 规则；子项的 margin 会真实渲染，但容易引发意外：
- 横向布局时，给每个子项设
margin-right，最后一个元素也带右距 → 多出多余空白 - 为规避上一条，改用
:not(:last-child)，但换行（flex-wrap: wrap）后末尾项不固定，选择器失效 - IE11 不支持
gap（需特殊处理），但也不完全支持 flex margin 的某些组合（如automargin 对齐 + 固定 margin 混用） - 响应式中 media query 修改 margin 时，需同步处理所有相关选择器，维护成本高
用 gap 替代 margin 的正确姿势
gap 是 flex（和 grid）原生间距属性，只作用于容器内项目之间，自动跳过首尾外侧，语义清晰、无副作用：
- 横向间距：
gap: 12px或row-gap: 12px - 纵向间距（含换行）：
column-gap: 8px；两者可合写：gap: 12px 8px - 响应式直接覆盖：
@media (max-width: 768px) { .list { gap: 8px; } }，无需改子项样式 - 与
justify-content/align-items完全正交，不影响对齐逻辑
兼容性兜底方案（尤其要支持 IE11）
如果必须兼容老浏览器，不建议退回到复杂 margin 逻辑。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 现代浏览器走
gap，IE11 用display: block+inline-block或 float 布局降级（仅限简单列表） - 或借助
@supports (gap: 1px)进行特性检测：.container { display: flex; }
@supports (gap: 1px) { .container { gap: 12px; } }
@supports not (gap: 1px) { .container > *:not(:last-child) { margin-right: 12px; } } - 工程中可封装成 CSS 自定义属性 + JS 检测，统一管理间距层级
基本上就这些。gap 不是银弹，但它把“控制项目间距离”这件事从 hack 式 margin 管理，拉回了声明式、可预测的轨道。兼容性有要求时稍作分层，远比满屏 :nth-child 和 :not(:last-of-type) 更可持续。
