justify-content: space-between 的间隙由容器主轴剩余空白均分而来，并非固定值；它将剩余空间平均分配给 n−1 个元素间间隙，易因子项过少、隐藏元素、换行或外边距叠加导致间距异常。
justify-content: space-between 的间隙是“算出来”的，不是“写死的”
它把容器主轴方向上**剩余空白**（Remaining Space）平均分给 n − 1 个“元素之间”的间隙。只要子元素总宽度远小于容器宽度，这个“剩余空白”就很大，间隙自然被拉得夸张。
常见触发场景：
- 父容器设了固定宽（比如
width: 800px），但子元素加起来才300px - 子元素用了
flex-shrink: 0且内容短（如纯文字按钮），无法压缩，留白全堆在中间 - 误加了空
<div></div>或display: none元素——它们仍参与n计数，但不占视觉空间，导致分母变小、单个间隙暴涨
flex-wrap: wrap 下 space-between 只管第一行
当子元素换行时，justify-content: space-between 仅对**当前行内元素**生效，且只按该行实际子项数量 n 计算间隙。最后一行若只有 2 个子项，n − 1 = 1，全部剩余空白都塞进这一个间隙里，看起来就是“间距爆炸”。
这不是 bug，是规范行为。实操建议：
- 需要多行均分 → 改用
gap: 16px（现代浏览器支持良好，Chrome 84+ / Firefox 63+ / Safari 14.1+） - 必须保留
space-between且行数固定 → 用伪元素占位，例如::after { content: ""; flex: 1; }补足最后一行数量 - 响应式下按钮组易出问题 → 加
flex-wrap: wrap后，立刻配gap，别依赖justify-content
margin 和 space-between 一起用会叠加出意外距离
子元素自带 margin-right，和 space-between 算出的间隙是**相加关系**，不是替代关系。第一个按钮左边缘到容器左边缘是 0，但它自己的 margin-right 还在，第二项又带 margin-left，结果中间实际距离 = space-between 间隙 + margin-right + margin-left。
典型症状：首项紧贴左，末项紧贴右，但中间空得离谱，检查盒模型能看到双层边距。
解决方式很直接：
- 统一清空子元素外边距：
button, .item { margin: 0; } - 若需微调，改用
gap控制整体间距，更可控 - 真要保留 margin → 只设单侧（如全设
margin-right: 8px），再用:last-child { margin-right: 0; }
移动端小屏下 space-between 容易失效的底层原因
它不缩放、不换行、不调整子元素尺寸——只做“剩余空间均分”。所以当屏幕变窄，子元素宽度不变（比如写了 width: 200px），就会撑爆容器，触发横向滚动或溢出，此时你看到的“大间距”其实是错觉，真实情况是布局已崩。
关键点：
-
space-between对容器宽度极度敏感，width: 100%父容器若嵌套在inline元素里，计算基准可能丢失 - IE11 虽支持该属性，但遇到
min-width或fit-content容易算错剩余空间，务必实机测试 - 真正可靠的响应式均分方案，现在首选
display: grid配grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))+gap
最常被忽略的是：你看到的“大间距”，往往不是 space-between 自己的问题，而是它忠实地执行了“剩余空间均分”后，暴露了容器宽度过大、子元素过窄、或存在隐藏干扰项这些上游问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
