justify-content: space-between 将剩余空间均分到相邻子项之间，仅在两个及以上子元素时生效，首尾贴边；失效主因是父容器未设 display: flex 或无剩余空间。
justify-content: space-between 能实现两端对齐，但“中间留白”不是额外加空隙，而是把**剩余空间均分到相邻子项之间**——它只在两个及以上子元素时生效，且首尾元素紧贴容器边缘，不预留边距。
为什么写了 justify-content: space-between 却没反应
最常见原因是容器没真正进入 Flex 上下文或没留下可分配的空间：
- 父容器缺失
display: flex或display: inline-flex（仅设flex-direction不够） - 子元素设置了
width: 100%、flex: 1或其他固定尺寸，总宽度 ≥ 容器宽度，导致无“剩余空间”可分 - 启用了
flex-wrap: wrap且内容超宽，换行后每行独立计算：第二行若只剩一个子项，它会默认左对齐（flex-start），看起来像失效 - 子元素带 UA 默认
margin（如button、input在某些浏览器中），干扰了 spacing 的视觉判断
两个子元素时 space-between 的行为特点
这是最典型也最容易误解的场景：只有两个子项时，space-between 会把全部剩余空间塞进它们中间，形成一个大空隙。首项贴左、末项贴右，**两端无空白**。
- 不要指望它自动给左右留边——那不是它的职责
- 如果希望“左右边距 = 中间间隙”，得用伪元素占位（见下一条）或改用
gap+justify-content: flex-start - IE11 下若子元素是纯文本节点（没包
span），可能完全不触发space-between，需显式包裹并设display: block
想让“两端也有空白”，且和中间一致，怎么办
原生 space-between 不支持这个需求；space-around 会让中间间隙变宽（= 2 × 两端距离），也不符合“完全相等”。可靠解法是把空白也当 Flex 项来布局：
- 给容器加两个透明伪元素：
.container::before和.container::after - 设
content: ""+flex: 0 0 0（不伸缩、不占内容空间） - 保持父容器为
display: flex，再设justify-content: space-between - 此时 n 个真实子项 + 2 个伪元素 = n+2 项，共产生 n+1 份等距间隙，**首尾自然留白**
示例 CSS：
.container {
display: flex;
}
.container::before,
.container::after {
content: "";
flex: 0 0 0;
}
.container > * {
/* 真实子元素无需额外 margin */
}
响应式换行时最后一行不对齐的问题
Flex 换行后，space-between 对每行单独作用。最后一行若子项不足，就会稀疏拉伸或左对齐——这不是 bug，是规范行为。
- 避免依赖
space-between做多行均匀分布；优先考虑display: grid+gap - 若必须用 Flex，可用
margin-right模拟间隙：给每个子项设margin-right: 1rem，再用:nth-child(3n)清除每行末项的margin-right（需预知每行数量） - 注意字体加载、图片异步渲染可能导致换行位置抖动，进一步放大对齐错觉
真正稳定的做法，是接受 Flex 的单行语义，把“跨行均分”交给 Grid 或 JS 控制；硬用 space-between 强撑多行，后期维护成本远高于初期省的那几行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
