Flex子项margin不重叠，因其处于FFC而非BFC，FFC无“相邻块级兄弟”概念，margin行为是累加而非折叠；块级中20px与30px margin取大值30px，而FFC中则相加为50px。

Flex子项的margin不会重叠，不是因为“被禁用了”，而是它压根就不在触发重叠的规则体系里——它不在块级格式化上下文（BFC）中，而在flex格式化上下文（FFC）中，而FFC根本就没有“相邻块级兄弟元素”这个概念。

Flex item 的 margin 行为是累加，不是折叠

在块级流中，两个相邻

设margin-bottom: 20px和margin-top: 30px，最终间距是30px（取最大值），这叫折叠。但在Flex容器里：

• 这两个值会真实相加，变成50px间距（除非你用gap覆盖）
• 这不是bug，是FFC的明确规范：没有“相邻垂直边距合并”机制
• 哪怕两个子项都设margin-bottom: 15px，它们之间也是30px，不是15px

为什么开发者常误以为“该重叠却没重叠”？

常见错觉来源是把块级经验直接套到Flex上：

• 写margin-top想控制垂直间距，但父容器是flex-direction: row→ 实际只影响交叉轴，不参与主轴排列逻辑
• 看到两个子项紧贴，以为是margin“合并了”，其实是没设gap、也没手动加margin，纯属默认紧凑排列
• 给第一个子项加margin-left: 10px，第二个却没动——这不是重叠失效，是Flex不认为它们“相邻”需要协调边距

哪些场景下 margin 看起来像重叠？

那不是重叠，是负值偏移造成的视觉覆盖：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• margin-left: -12px让子项向左挪，但后续子项仍按原位置排布，导致“盖住前一个”
• 父容器overflow: hidden时，负margin部分被裁掉，重叠效果消失——检查computed样式里的overflow是否为visible
• gap: 8px + margin-left: -12px → 先抵消gap，再往左多走4px，实际覆盖前一项4px
• 多个子项同时用反向负margin（如一个margin-right: -5px，下一个margin-left: -5px），间隙趋近于0，仍是各自偏移结果

真正要注意的是：别拿margin当gap用，也别指望它“自动聪明”。Flex布局里，间距控制权应该交给gap，位移控制权交给transform或position，而margin只负责微调或兼容降级——混着改，最容易卡在“为什么这里多出8px”的死循环里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！