justify-content: space-between 未生效的主因是父容器未设 display: flex 或子元素被 flex: 0 0 100% 等规则强制占满，导致无剩余空间可分配；需检查 display 声明、清除子项 width/flex-basis/margin 干扰。
justify-content: space-between 为什么没生效
常见现象是写了 justify-content: space-between，但子元素紧贴左/右边缘，中间没空隙。根本原因通常是容器没设 display: flex，或者子元素被设了 flex: 0 0 100% 这类强制占满的规则，导致 Flex 无法分配剩余空间。
实操建议：
- 检查父容器是否明确声明了
display: flex或display: inline-flex - 确认子元素没有设置
width、flex-basis或flex值强行撑满整行 - 若子元素含
margin（尤其margin-right），会干扰 space-between 的间距计算，建议清空子元素的外边距
space-between 在只有两个子元素时的表现
这是最典型的使用场景：左对齐第一个，右对齐最后一个，中间自动留空。但要注意——Flex 会把「剩余空间」均分到两个子项之间，即只产生一个间隙，不是在每个子项两侧都加空隙。
示例结构：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
justify-content: space-between;
}
.item { width: 80px; height: 40px; background: #ccc; }
此时两个 .item 分别贴左、贴右，中间空隙 = 容器宽度 − 两个子项总宽。
注意点：
- 如果子元素超过两个，
space-between会在「首尾固定、中间等距」逻辑下分配间隙，比如 3 个子项会产生 2 段等宽空隙 - 子元素不能是
flex: 1，否则它们会拉伸填满空间，space-between 失效
替代方案：当需要「两端对齐 + 中间有固定空白」时
如果设计要求不是“动态均分剩余空间”，而是“左右各一个按钮，中间固定留白 40px”，space-between 就不够用了——它不接受自定义间隙值。
更可控的做法：
- 用
margin-left: auto和margin-right: auto组合：第一个子项不设 margin，第二个加margin-left: 40px，第三个加margin-left: auto（推到最后） - 或改用
gap+justify-content: center，配合伪元素占位（适合静态布局） - 极端情况可退回到绝对定位，但会失去 Flex 的响应式优势
兼容性与移动端注意事项
justify-content: space-between 在现代浏览器中无兼容问题，但 iOS Safari 旧版本（flex-wrap 和多行 space-between 支持不佳。单行布局基本安全。
容易被忽略的细节：
- 容器必须有明确宽度（或受父容器约束），否则 flex 主轴长度不确定，space-between 无法计算“剩余空间”
- 若容器设了
padding，space-between 的对齐基准是 content box 边缘，不是 padding 内侧——这点常导致视觉错位 - 在
flex-direction: column下，space-between控制的是垂直方向，此时要确保容器有明确高度
