flex容器中用margin会导致双倍间距、方向适配繁琐及首尾清理麻烦，而gap可原生解决这些问题，但需注意其不控制边缘间距且IE不支持。flex容器里用margin会出什么问题当多个子元素都设置了 margin-bottom，而父容器是 display: flex 时，相邻元素的外边距不会合并（这点和普通块级流不同），但会出现“双倍间距”——比如每个子项设 margin-bottom: 12px，结果两两之间变成 24px，顶部/底部还多出 12px 空白。这不是 bug，是 flex 布局下 margin 的正常表现，但不符合视觉预期。更麻烦的是响应式场景：你得为不同排列方向（row / column）分别写 margin-right 或 margin-bottom，还要处理最后一项的多余 margin，常用伪类或 JS 去除，维护成本高。gap 属性怎么直接替代 margingap 是 flex 和 grid 容器原生支持的间距控制属性，只作用于容器内项目之间的空隙，不涉及单个项目自身盒模型，因此完全规避了 margin 的叠加、方向判断、首尾清理等问题。实操建议如下：立即学习“前端免费学习笔记（深入）”；对 flex-direction: row，gap: 12px 等效于“每两个相邻项之间加 12px 水平空隙”，左右边缘无额外间隙对 flex-direction: column，同样生效，自动转为垂直间距支持分别设置：row-gap: 8px; column-gap: 16px，适合网格化布局需求IE 不支持 gap（包括 IE11），如需兼容，必须降级方案（见下一条）兼容 IE 时怎么安全降级不能只靠 @supports (gap: 0) 包裹，因为部分旧版 Chrome/Safari 对 flex 下 gap 支持不完整（如 Safari ≤14.1），且 @supports 在 flex 容器中行为不稳定。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。