justify-content: space-between 使首尾子元素贴住容器两端，中间元素间距相等；常见失效原因包括未设 display: flex、子元素过宽换行、容器宽度不足、隐藏元素参与计算；与 space-around、space-evenly 的间隙数量及分布逻辑不同。
justify-content: space-between 在 Flexbox 中的实际效果
它会让容器内所有子元素沿主轴（默认是水平方向）均匀分布，首尾两个元素分别贴住容器的起始边和结束边，中间元素之间的间距相等。但要注意：这不是“每个间隙都一样大”的均匀，而是“首尾不留白、中间留白均分”的布局逻辑。
为什么设置了 space-between 却没看到间隙？
常见原因不是 CSS 写错了，而是容器或子元素本身限制了表现：
- 容器
display: flex缺失或被覆盖（比如父级有display: inline干扰） - 子元素设置了
flex-shrink: 0但内容过宽，导致换行或溢出，space-between失效（Flex 主轴必须是单行） - 容器宽度不够，或子元素用了
width: 100%强占整行，只剩一个元素可见 - 存在隐藏元素（如空
<div></div>或display: none元素），它们仍参与justify-content计算
space-between 和 space-around / space-evenly 的关键区别
三者都用于主轴对齐，但空白分配逻辑完全不同：
-
justify-content: space-between→ 首尾贴边，中间间隙相等（n 个子元素，产生 n−1 个间隙） -
justify-content: space-around→ 每个子元素两侧间隙相等，因此相邻元素间间隙是单侧的 2 倍（首尾到容器边的距离 = 相邻元素间距离的一半） -
justify-content: space-evenly→ 所有间隙（包括首尾）完全相等（n 个子元素，产生 n+1 个等距间隙）
例如 3 个子元素时：space-between 有 2 个间隙；space-evenly 有 4 个间隙；space-around 视觉上像“2.5 个间隙”——首尾各 0.5，中间两个各 1。
立即学习“前端免费学习笔记（深入）”；
移动端或响应式中使用 space-between 的隐患
在小屏幕下，如果子元素宽度固定（如 width: 200px），容易超出容器导致横向滚动或布局错乱，此时 space-between 不会自动压缩元素。更稳妥的做法是配合 flex-wrap: wrap 和媒体查询，或者改用 gap + display: grid 替代。
另外，IE11 对 space-between 支持正常，但若父容器设了 min-width 或使用了 fit-content，可能触发 IE 的计算 bug，建议测试时用真实设备或 BrowserStack 验证。
真正容易被忽略的是：当子元素中有 margin 时，它会叠加在 space-between 的间隙之外，可能导致实际间距远超预期——这种组合极少需要，多数情况应删掉 margin，只靠 justify-content 控制间距。
