justify-content: space-between 没生效最常见原因是父容器未设 display: flex，或子元素脱离文档流；它需至少2个子项，且仅在元素间均分间隙，首尾无边距。
为什么 justify-content: space-between 没生效
最常见原因是父容器没设 display: flex，或子元素被设了 float / position: absolute 等脱离文档流的样式。另外，如果只有 1 个子元素，space-between 会表现得像 flex-start——它需要至少 2 个子项才能“分隔”。
用 space-between 实现真正等距，要注意这几点
它把剩余空间均分到“元素之间”，不是“元素两侧”。比如 3 个元素，会产生 2 个间隙；但首尾元素会紧贴容器边缘。如果你想要首尾也留空，改用 justify-content: space-around 或 space-evenly。
-
space-between：间隙在元素之间，首尾无边距 -
space-around：每个元素“周围”有相等间距（首尾边距是中间间隙的一半） -
space-evenly：所有间隙（含首尾）完全等宽（IE 不支持）
当子元素宽度不固定时，space-between 可能出问题
如果子元素设置了 flex-shrink: 1（默认值），且内容超长，它们可能被压缩，导致视觉上“不等距”。此时应显式控制收缩行为：
- 加
flex-shrink: 0防止压缩 - 用
min-width: 0配合overflow: hidden处理长文本截断 - 避免给子元素设
width: 100%或其他强制拉伸属性
.container {
display: flex;
justify-content: space-between;
}
.item {
flex-shrink: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}替代方案：不用 flex 也能做等距？慎选
CSS Grid 更适合精确控制等距布局，尤其当列数固定时：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; /* 所有间隙统一设 */
}但注意：gap 是网格间隙，和 flex 的 justify-content 逻辑不同；它不依赖子元素数量，也不影响首尾边距。如果要兼容老浏览器（如 IE11），仍得回退到 flex + 伪元素模拟间隙，但维护成本高，不推荐。
真正难的不是写出来，而是判断该用 space-between 还是 space-evenly，或者干脆换 grid —— 很多人卡在第一步就按文档抄代码，没看清楚“等距”到底指哪几段距离。
