Flex容器中margin-bottom不撑高父容器并非外边距合并，而是align-items: stretch默认行为所致：子元素无明确高度且内容少时底边“浮”在基线附近，margin-bottom未参与布局计算；gap是更优解，因其为Flex/Grid原生间距机制，不塌陷、不解耦、语义准确，现代浏览器已全支持。
Flex容器里margin-bottom不撑高父容器，是不是合并了？
不是合并，是align-items: stretch在起作用。子元素没设高度、内容又少时，它底边“浮”在基线附近，margin-bottom压根没参与布局计算。开发者工具里看Computed值，会发现父容器高度就是子元素内容高度，margin-bottom数值存在但没被计入——这不是bug，是Flex模型的默认行为。
为什么gap比margin更适合Flex子项间距控制？
gap是Flex/Grid原生间距机制，插在轨道之间，和子元素自身盒模型完全解耦。它不会塌陷、不触发BFC、不依赖对齐方式，语义也更准确：你想要的是“项与项之间的空隙”，不是“每个项自己往外推”。
-
gap在现代浏览器（Chrome 84+/Firefox 63+/Safari 14.1+）已全支持，无需polyfill - 设
gap: 12px，所有相邻子项间都是12px，不会因第一个/最后一个子项漏掉一半 - 用
row-gap和column-gap可分别控制行列，比手动调margin-top/margin-left更可控 - IE11不支持
gap，若必须兼容，回退方案优先选display: inline-block+margin-right，而非强行加overflow: hidden破坏布局
哪些场景下还不得不保留margin？怎么避坑？
当需要单独偏移某个子项（比如右对齐一个按钮），或与非Flex兄弟元素保持视觉一致性时，margin仍有必要。但必须注意：
- 避免同时设
margin-top和margin-bottom——哪怕只在一个子项上，也可能和相邻项触发垂直合并（尤其在flex-direction: column时） - 想用
margin: auto推远某子项？确保父容器有明确主轴尺寸（如width或height），否则auto无空间可分 - 别在设了
align-self: flex-start的子项上再指望margin-bottom影响父容器高度——它已经脱离stretch逻辑，但也没获得新高度基准，结果就是“悬空”
媒体查询中切换flex-direction时margin容易翻车
小屏下把flex-direction: row改成column，同时把margin-right批量替换成margin-bottom，看似合理，实际可能让某些子项突然换行。因为margin-bottom在column流中会参与父容器高度计算，而原有margin-right不会。
更稳的做法：统一用gap，并在媒体查询里只改flex-direction和gap值（比如从gap: 8px 16px变成gap: 16px）。这样既避免方向切换带来的margin语义错位，也省去手动维护多套margin规则的麻烦。
真正难处理的从来不是gap写法，而是那些“历史代码里散落各处的margin: 10px 0”——它们在Flex容器里安静地失效，直到某天改版时父容器高度突然塌掉，才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
