flex item 的 margin 不折叠，是因为 display: flex 创建的是 flex 格式化上下文（ffc），而 margin 折叠仅发生在块级格式化上下文（bfc）中；ffc 无“相邻块级兄弟”概念，margin 是累加而非合并，如两个 item 各设 margin-bottom: 20px，间距即为 40px。
flex item 的 margin 为什么不会折叠
因为它们压根就不在触发折叠的规则范围内——display: flex 创建的是 flex 格式化上下文（FFC），而外边距折叠（margin collapsing）只发生在块级格式化上下文（BFC）中。FFC 下没有“相邻块级兄弟元素”这个概念，只有主轴/交叉轴上的排列顺序，所以 margin-top 和 margin-bottom 不会合并，而是直接累加。
常见误解：两个 flex item 都设了 margin-bottom，间距却变大了
这不是 bug，是预期行为。比如两个 div 都设了 margin-bottom: 20px，它们之间的间距就是 40px，不是 20px。很多人误以为“应该取最大值”，其实是把 BFC 的规则套到了 FFC 上。
- 块级流中：兄弟元素
margin-bottom: 20px+margin-top: 30px→ 实际间距 30px（折叠） - Flex 容器中：同上设置 → 实际间距 50px（累加）
- 如果想得到“等效于折叠”的视觉效果，该用
gap，而不是靠 margin 拼凑
flex 容器里子元素 margin-top “穿透”父容器怎么办
这和折叠无关，是父子 margin 塌陷（collapsing between parent and first child），但前提是父容器没形成 BFC。注意：display: flex 本身不自动创建 BFC，所以如果父容器没 border、没 padding、没 overflow，子项的 margin-top 仍可能“顶开”整个容器。
- 最稳解法：给 flex 容器加
overflow: hidden或overflow: auto（哪怕内容不溢出） - 语义更清解法：把
margin-top拆成父容器的padding-top+ 子项margin: 0 - 别依赖
margin控制 flex item 间距——gap才是专为此设计的属性
gap 为什么比 margin 更适合 flex 布局
gap 是布局层原生支持的间距控制机制，它完全绕开了 margin 的所有副作用：
-
gap只作用于 item 之间，不影响首尾与容器边缘（除非配合align-content） - 自动适配
flex-direction：row时管水平，column时管垂直，不用手动切margin-right/margin-bottom - 不参与
flex-shrink计算，不影响响应式收缩逻辑 - 对屏幕阅读器和焦点顺序无干扰，而 margin 有时会意外影响可访问性遍历
真正容易被忽略的是：即使你在 DevTools 里看到子元素的 margin 值“亮着”，只要它出现在 flex 容器里，就别指望它按块级逻辑工作——FFC 的规则从底层就不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
