Flex容器中margin-bottom“失效”是因align-items: stretch导致子元素底边悬空，并非外边距塌陷；应优先使用gap控制间距，避免margin混用引发合并或换行问题。
Flex容器本身不触发外边距塌陷，但子元素在特定对齐方式下会让margin-bottom“失效”，这不是塌陷，而是布局模型切换导致的间距逻辑变化——得换思路，不能硬套块级流那一套。
为什么margin-bottom在display: flex里不撑高父容器
默认align-items: stretch会让子元素拉伸填满交叉轴（通常是高度），但若子元素没设高度、也没内容撑开，它的“底边”实际落在基线附近，margin-bottom就悬空了，不参与父容器高度计算。
- 给子元素加
align-self: flex-start，强制它从顶部对齐，此时margin-bottom才真正生效 - 或者统一改父容器的
align-items: flex-start，但要注意所有子项都会被顶上去 - 别依赖
margin-bottom控制子项间距，优先用gap——它不塌陷、不悬空、语义清晰
gap和margin混用时的合并陷阱
Grid或Flex中同时用gap和子元素margin-top/margin-bottom，尤其在响应式断点切换后，容易让相邻子项的垂直margin再次塌陷（比如margin-bottom: 16px + margin-top: 16px → 实际只有16px）。
-
gap是轨道间隙，margin是盒模型属性，两者机制不同，但塌陷仍发生在子元素之间 - 响应式中若把
flex-direction: row切为column，原来用margin-right分隔的项，现在margin-bottom可能和下一个的margin-top相遇 - 解决方法：断点内统一用
gap；必须用margin时，只设单方向（如只用margin-bottom，去掉margin-top）
媒体查询中重设margin引发的错位
小屏下把Flex改成column，同时把子项的margin-right改成margin-bottom，结果某些子项突然换行——不是塌陷，是margin值叠加后超出了容器宽度或高度，触发了Flex的折行逻辑。
立即学习“前端免费学习笔记（深入）”；
- 检查
flex-wrap是否为nowrap（默认值），一旦内容+margin总宽超容器，就会换行 - 用
box-sizing: border-box确保padding/border不额外增加尺寸，但margin永远在外，不受影响 - 更稳妥的做法：用
gap替代所有方向的margin分隔，它不参与盒模型计算，也不会导致换行
真正难缠的不是怎么修，而是忘了Flex/Grid只是“不塌陷父子margin”，子元素之间如果还在文档流里（比如没设align-self、没用gap），它们的垂直margin照旧会合并——这坑藏得深，调试时得盯着computed样式里的实际margin值看。
