justify-content: space-between 未生效的主因是父容器未设 display: flex、子元素换行或宽度固定导致无剩余空间；需检查 padding、margin 干扰及 ie11 兼容性问题。
justify-content: space-between 在 flex 容器里为什么没生效
常见现象是写了 justify-content: space-between，但子元素全挤在左边，或者末尾留了大片空白却没“推”到最右。根本原因通常是容器没设成 flex，或子元素被意外换行、设置了固定宽度导致无法伸展。
- 必须确保父容器已声明
display: flex（仅inline-flex也行，但注意行内特性） - 子元素不能有
flex-wrap: wrap且内容超宽——一旦换行，space-between只在当前行起作用，最后一行往往只剩一个元素，它会被左对齐 - 如果子元素用了
width: 100%或其他固定尺寸，又没留余量，它们会占满整行，没空间可“分”，space-between就失效
两端对齐时最后一个元素贴右边界但中间有空隙，怎么调
这是 space-between 的标准行为：首尾元素紧贴容器边缘，剩余空间平均分配在中间元素之间。如果你发现间隙不均或末尾没贴右，大概率是容器或子元素存在不可见干扰。
- 检查父容器是否有左右
padding—— 有 padding 时，space-between仍以 content box 为边界，视觉上就“没贴边” - 子元素是否带默认
margin（比如button、input在某些 UA 样式下有）？这会让实际间距变复杂 - 避免混用
margin-left: auto等手动对齐方式，它会和space-between冲突，尤其在动态增删子项时行为难预测
IE11 下 justify-content: space-between 不兼容怎么办
IE11 支持 flex，但对 justify-content 的实现有缺陷：当子元素是匿名文本节点（比如纯文字没包 span），或容器设置了 min-height 而内容不足时，space-between 可能完全不触发。
- 强制所有子元素为块级或弹性项：给文字外层加
span，并确保每个子元素都有明确的display值（如display: block） - 不用
min-height，改用height或靠内容撑开；若必须用min-height，需配合flex-shrink: 0防止子项被压缩 - 更稳妥的降级方案：用
text-align: justify+ 伪元素实现类似效果，但只适用于单行、纯文本场景
用 space-between 实现“最后一行左对齐”的响应式布局
Grid 或多列 flex 中，子项数量不整除时，最后一行默认还是 space-between，导致它被拉得稀疏难看。这不是 bug，是规范定义的行为；要改就得绕开它。
- Flex 方案：用
justify-content: flex-start+margin-right模拟间隙，再用:nth-child(n)控制每行末尾清除 margin - CSS Grid 更直接：用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))+justify-content: start，天然避免末行拉伸 - 别试图用
space-between配合flex-wrap强行“修复”末行——CSS 无此控制粒度，JS 补丁成本高且易破
真正麻烦的是混合了图标、文字、不同字号的组件，space-between 的“等分间隙”逻辑会在视觉权重上失衡。这时候与其调参数，不如承认它只适合结构规整的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
