justify-content: space-between 仅在主轴有剩余空间且子元素不换行时生效；失效主因包括父容器display未正确设为flex、子项总宽≥容器宽、存在display:none元素、子项flex-shrink:0撑满等。
justify-content: space-between 能让 Flex 子元素“首尾贴边、中间等距”，但不是所有场景下都真能“均匀分布”——它只在主轴有剩余空间、且子元素不换行时才生效。
为什么写了 justify-content: space-between 却没看到间隙
根本原因不是 CSS 写错，而是 Flex 主轴没“腾出空隙可分”：
-
display: flex没生效：父容器被display: inline、float或position: absolute覆盖 - 子元素总宽度 ≥ 容器宽度：触发换行（
flex-wrap: wrap会让space-between失效） - 存在
display: none元素或空<div></div>：它们仍参与间隙计算 - 子元素设了
flex-shrink: 0且内容撑满：浏览器无法压缩内容来“挤出”空白
space-between 和 space-around 的数学区别在哪
关键看“谁在分空隙”和“分几份”：
-
space-between：只在n−1个“元素之间”分剩余空间 → 首尾无空隙，中间每段间隙 =Remaining Space / (n − 1) -
space-around：每个元素左右各占一份，共n+1份 → 单侧间隙 =Remaining Space / (n + 1)，相邻元素间实际是两份（视觉上是首尾的 2 倍） - 3 个子元素时：
space-between产生 2 个等距间隙；space-around视觉上像首尾各 0.5 份、中间两个各 1 份
移动端或响应式中用 space-between 的隐患
固定宽子元素（如 width: 200px）在小屏下容易溢出，space-between 不会自动缩放或换行：
- 它只分配剩余空间，不干预子元素尺寸
- 若子元素文字长度不一 + 未设
flex: 1，视觉上会显得“不匀” - IE11 虽支持该属性，但遇到
min-width或fit-content容易计算异常 - 更稳妥的替代是
gap（配合display: flex或grid），它不受换行影响，还能单独控制行列间距
真正容易被忽略的干扰项：子元素的 margin
margin 会叠加在 space-between 的间隙之外，而不是被它覆盖或抵消：
- 比如每个子项设
margin-right: 12px，再加space-between，最终间距 =space-between算出的值 +12px - 绝大多数情况应删掉子项的
margin，改用gap控制统一间距 - 若必须保留
margin，请只设单侧（如全设margin-right），再用:last-child { margin-right: 0; }清除末项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
