Flex子项的margin和padding会导致容器溢出，因Flex不自动压缩子项来容纳它们；box-sizing: border-box可解决padding问题但不管margin，gap属性是更优的间隙方案。
Flex子项的margin和padding为什么会让容器溢出
Flex容器本身不会自动“压缩”子项来容纳它们的内边距或外边距，尤其是当子项设置了flex: 1或固定width时，padding和margin会直接加在尺寸之外。浏览器按标准盒模型计算：比如一个flex: 1子项设了padding: 10px，它实际占宽 = 内容宽 + 20px（左右），但Flex分配空间时只按“基础尺寸”算，结果就是总宽度超父容器。
用box-sizing: border-box收住padding
这是最常用也最有效的一步，但它只管padding和border，不管margin：
-
box-sizing: border-box让width包含padding和border，避免因内边距撑大元素 - 必须显式加在Flex子项上，不能只加在容器上
- 现代浏览器全支持，无需前缀；但IE8+才支持，老项目需确认兼容性
- 示例：
.item { box-sizing: border-box; padding: 12px; width: 50%; }
避开margin导致的溢出——用gap代替子项margin
Flex子项之间用margin-right或margin-bottom分隔，是溢出高发区。改用容器级gap更干净：
-
gap是Flex容器属性，不增加子项自身尺寸，纯间隙，不影响flex计算 - IE完全不支持
gap，如需兼容，得回退到margin+ 手动排除最后一项（例如用:not(:last-child)） -
gap对flex-wrap: wrap也生效，而margin容易在换行时多出多余空隙 - 示例：
.container { display: flex; gap: 8px; }→ 子项不用再写margin-right
当必须用margin时，怎么防溢出
有些场景绕不开margin（比如要和非Flex逻辑共存、第三方组件限制），就得手动“抠掉”它：
立即学习“前端免费学习笔记（深入）”；
- 给容器加负
margin抵消，比如子项margin-right: 12px且共3项，则容器加margin-right: -12px - 用
calc()微调子项宽度：width: calc(33.333% - 8px)（适用于等分+固定间隙） - 避免在
flex: 1子项上同时设width和margin，二者冲突易触发渲染异常 - 检查是否误把
padding写在了flex-direction: column的子项height上——同样会溢出容器高度
真正麻烦的不是padding或margin本身，而是它们混在flex的弹性计算里，又没报错，只悄悄撑破布局。盯住开发者工具里每个子项的“Computed”宽高，看border-box尺寸是否真等于你预期的分配值，比猜强得多。
