gap不加宽容器但暴露box-sizing问题：子项需显式设box-sizing:border-box，否则padding与gap叠加导致溢出；禁用margin模拟gap，避免双重间隙。
gap 本身不加宽容器，但会暴露 box-sizing 问题
gap 是 grid / flex 容器级属性，它只控制项目之间的间距，不参与容器 width 计算。所谓“超宽”，其实是 padding + gap 叠加后，内容区被挤占，而 box-sizing: content-box（默认值）让子项尺寸继续按“内容宽 + padding”算，最终视觉上撑破边界。DevTools Layout 面板里看到 border box 超出预期，90% 是这个原因。
Flex 容器加了 gap 还溢出？先查子项的 box-sizing
Flex 容器设了 gap: 12px，但子项没加 box-sizing: border-box，那每个子项的 padding 仍会额外叠加在分配宽度之外。尤其当子项用了 flex: 1 或 width: 50% 时，浏览器先分 50% 给内容区，再加左右 padding，必然超。
- 必须显式写在子项上：
.flex-item { box-sizing: border-box; padding: 12px; } - 全局重置
* { box-sizing: border-box; }不保险——Ant Design、Element Plus 等库常通过更具体选择器覆盖它 - 务必进 DevTools → Computed 面板确认该子项的
box-sizing真是border-box，不是继承来的假象
别用 margin 模拟 gap，gap 才是 Flex 的原生解
给子项写 margin-right: 12px，哪怕子项已设 box-sizing: border-box，margin 也不受盒模型控制，照样多占 12px，Flex 分配逻辑完全无视它。结果就是：gap 设了 12px，你又手写 margin 12px，实际间隙 24px，还白送溢出风险。
- 正确做法：只给 Flex 容器加
gap: 12px，所有子项自动获得间隙，且不参与尺寸计算 - 兼容旧浏览器（IE / Safari .flex-item:not(:first-child) { margin-left: 12px; }
- 如果子项同时有
padding和margin，优先删 margin，留 padding +box-sizing: border-box+gap
min-width: 0 是 flex: 1 子项的隐藏依赖
即使 box-sizing: border-box 生效，若子项用了 flex: 1 且含长文本或未约束图片，它仍可能因默认 min-width: auto 拒绝收缩，导致横向溢出。这不是 gap 的锅，但 gap 加剧了空间紧张。
- 对关键子项加
min-width: 0，允许它压缩到 0（配合overflow: hidden或text-overflow: ellipsis） -
img必须配max-width: 100%; height: auto;，否则固有尺寸直接冲垮布局 - 避免在 flex-direction: column 的子项上滥用
padding-bottom——它会撑高容器，和 gap 在垂直方向形成双重挤压
真正麻烦的不是 gap 本身，而是它把原本安静的盒模型问题突然推到前台：你得同时盯住容器的 box-sizing、子项的 box-sizing、min-width、gap 值，以及里面有没有一张没设 max-width 的图。少查一环，就差那 1–2px 触发滚动条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
