justify-content: space-between 未生效最常见原因是父容器未设 display: flex 或无明确宽度；它仅在 flex 容器主轴（默认水平）生效，且受子元素 flex 属性、换行及 IE11 兼容性影响。
justify-content: space-between 为什么没生效
最常见的情况是父容器没设 display: flex，或者忘了给父元素设定明确宽度（尤其是 inline 元素作为父容器时）。justify-content 只在 flex 容器中起作用，且只对主轴方向生效——默认主轴是水平的，所以它管的是左右间距。
实操建议：
- 检查父元素是否设置了
display: flex或display: inline-flex - 确认父容器不是
display: inline或未设宽的div，否则可能收缩包裹内容，导致“两端对齐”失去参照 - 如果子元素用了
flex: 0 0 auto以外的伸缩设置（比如flex: 1），会抢占空间，space-between就不按预期工作
space-between 和 space-around / space-evenly 的关键区别
三者都用于分配剩余空间，但计算逻辑不同，容易混淆：
-
space-between：首项贴左、末项贴右，中间空隙均分（n 个子元素 → n−1 个间隙） -
space-around：每个子元素**两侧**等距，首尾元素外侧只有中间间隙的一半，视觉上边缘留白更小 -
space-evenly：所有间隙（包括首尾外侧）完全相等，最“均匀”，但兼容性稍差（IE 不支持）
例如 3 个子元素在 600px 宽容器中：space-between 产生 2 个等宽间隙；space-evenly 产生 4 个等宽间隙（左外、中1、中2、右外）。
立即学习“前端免费学习笔记（深入）”；
当子元素宽度不确定时，space-between 会出什么问题
如果子元素本身宽度是百分比、fit-content 或受内容撑开，且总宽度加起来不到父容器宽，space-between 仍会拉伸间隙——这通常符合预期；但一旦子元素总宽超过父容器（比如写了 width: 50% 但有 3 个），就会换行或溢出，此时 justify-content 对第二行无效（除非设 flex-wrap: wrap 并单独处理每行）。
实操建议：
- 用
flex-wrap: wrap+justify-content: space-between时，注意最后一行可能不对齐——这是 flex 布局的固有限制 - 若需多行也严格等距，得用 CSS Grid，比如
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))配合justify-content: space-between - 避免给子元素设死宽度的同时又依赖
space-between做弹性布局，二者目标冲突
IE11 下 space-between 的兼容性陷阱
IE11 支持 justify-content，但存在两个典型 bug：
- 当父容器是
inline-flex且子元素为display: block时，space-between可能完全失效 - 如果子元素含
margin，IE11 会把 margin 算进主轴尺寸，干扰间隙计算，导致错位
临时缓解方式：对 IE11 单独用 text-align: justify + 伪元素撑开（仅适用于纯文本或可设 inline 的元素），或降级为 margin-left: auto 手动控制部分间距。
真正难处理的是动态数量子元素 + IE11 + 必须等距——这时候别硬扛，换 JS 计算 margin 更可靠。
