justify-content: space-between 实现首尾贴边、中间等距，但仅分配子项间间隙（n个子项产生n−1个间隙），不包含首尾到容器边缘的空白；失效主因是缺少display: flex、子项总宽超容器或flex-wrap换行。
justify-content: space-between 能实现首尾贴边、中间等距，但不是“所有间隙都一样大”的均匀分布——它只在元素之间分空白，不包括首尾到容器边缘的部分。
为什么设置了 space-between 却没看到间距？
常见失效不是 CSS 写错了，而是布局前提被破坏：
- 容器缺少
display: flex（比如被父级display: inline干扰，或被其他规则覆盖） - 子元素总宽度超过容器，触发换行 ——
space-between仅在单行生效，flex-wrap: wrap后它只作用于每行内部，末行可能只剩一个元素 - 存在隐藏元素：
display: none的节点不渲染，但仍参与justify-content计算；空<div></div>同理 - 子元素设了
flex-shrink: 0且内容过宽，导致溢出或挤压，主轴空间不足
space-between 和 space-evenly 的关键区别在哪？
三者数学逻辑完全不同，不能靠“感觉”替换：
-
space-between：n 个子项 → n−1 个间隙，首尾无间隙（公式：gap = remaining-space / (n - 1)） -
space-evenly：n 个子项 → n+1 个等距间隙，首尾到容器边缘的空白 = 元素间空白（公式：gap = remaining-space / (n + 1)） -
space-around：n 个子项 → 视觉上像 n+1 个间隙，但首尾各占 0.5 份，中间每个间隙占 2 份（即：首尾间距 = 中间间距 ÷ 2）
如果你要的是“两端也有相同间距”，直接用 space-evenly，别硬套 space-between + 伪元素模拟。
移动端或响应式下用 space-between 容易踩什么坑？
固定宽子项 + 小屏幕 = 布局崩坏高发场景：
- 子项设了
width: 200px，容器宽度降到 380px 时，只能容下 1 个，space-between失效（只剩一个元素，它会左对齐） - IE11 虽支持该属性，但若容器同时设了
min-width或width: fit-content，可能触发旧引擎计算 bug - 子项含
margin时，它会叠加在space-between计算出的间隙之外，导致实际间距翻倍甚至错位 —— 这种组合极少合理，应删掉 margin
真正难处理的是动态数量 + 不定高内容的组合：当子项高度差异大，又用了 flex-direction: column 配 justify-content: space-between，末项可能被挤出视口底部。这种时候，gap + display: grid 往往比 Flex 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
