justify-content: space-between没生效的主因是父容器未设display: flex，或子元素被float、position: absolute脱离文档流；单个子元素时视觉与flex-start相同属正常；可用margin: auto替代实现两端对齐。
flex布局中justify-content: space-between为什么没生效
子元素没在主轴两端对齐，大概率不是写错了属性，而是父容器没设成display: flex，或者子元素被float、position: absolute之类脱离文档流的样式干扰了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认父容器有
display: flex（或inline-flex），且没被其他CSS重置掉 - 检查子元素是否用了
float——flex容器里float无效，但会让人误以为“样式没起作用” - 子元素不能是
position: absolute，否则它完全脱离flex流，justify-content对其无影响 - 如果只有1个子元素，
space-between和flex-start视觉上一样——这是正常行为，不是bug
用margin: auto手动推到两端的适用场景
当父容器是flex但子元素数量不固定，又想让第一个靠左、最后一个靠右时，justify-content: space-between不够灵活；这时候可以放弃主轴对齐，改用自动外边距控制单个元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给第一个子元素加
margin-right: auto，它就会尽可能往左贴，把剩余空间挤到右边 - 给最后一个子元素加
margin-left: auto，同理往右贴 - 两个都加（比如中间元素）：它会居中，左右均分剩余空间
- 注意：这个技巧依赖flex的自动外边距计算逻辑，在IE10–11里支持不全，
margin: auto可能不生效
Grid也能做两端对齐，但思路完全不同
如果父容器用的是display: grid，别硬套flex那一套。grid没有justify-content: space-between这种主轴分配逻辑，得靠轨道定义或对齐属性配合使用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 简单情况：用
justify-content: space-between在grid容器上——它真能用，但只对整个网格轨道容器生效（比如多行grid时，各行之间留空） - 更常用的是
justify-items: start+ 给特定子项设justify-self: end，手动指定对齐方式 - 或者直接用
grid-template-columns: 1fr auto 1fr，把中间内容固定宽，两边用1fr撑开——这比算margin更稳 - 注意：grid的
justify-content作用对象是网格容器本身，不是子项；别和flex混淆
IE兼容性下怎么安全实现两端对齐
IE10–11对flex的支持有坑：space-between基本可用，但一旦子元素里有min-width或flex-wrap: wrap，就容易错位甚至崩溃。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先降级为
justify-content: flex-start+ 手动加margin-left: auto在最后一个子元素上（IE10+支持这个） - 避免在flex容器里混用
width和flex相关属性，IE对flex-basis解析不稳定 - 如果必须支持老IE，干脆不用flex，改用
text-align: justify+ 伪元素::after撑开行宽——虽然麻烦，但最稳 - 测试时重点看子元素是否意外换行，IE常把
space-between当成space-around处理
float了，或者父容器被max-width和padding挤变形了——先查computed styles，再调代码。 
