justify-content: space-between 未生效的根本原因是它仅对主轴上的多个弹性子项生效，且忽略 inline 元素、文本节点及未设 flex 的子容器；需确保父容器为 display: flex，子元素为块级元素且数量 ≥2。
为什么 justify-content: space-between 没把元素真正“撑开”？
常见现象是：容器有足够宽度，但两端元素紧贴边缘，中间空隙不均，甚至最后一个元素被“挤掉”。根本原因不是属性写错了，而是它只对 主轴上的多个弹性子项 生效，且默认忽略 display: inline 元素、文本节点或未设 flex 的子容器。
- 必须确保父容器声明了
display: flex或display: inline-flex - 子元素不能是纯文本（如
<div>左</div> <div>右</div>可以，但<div>左</div>中间<div>右</div>中的“中间”会被当文本节点忽略） - 如果只有 1 个子元素，
space-between等效于flex-start—— 它没东西可“分” - 注意 margin 折叠：子元素首尾的外边距不会参与分配，别指望靠
margin模拟间隙
justify-content: space-between 和 space-around/space-evenly 怎么选？
三者都用于主轴对齐，但分空间逻辑完全不同，选错会导致视觉节奏错乱。关键看你要的是“两端贴边 + 均匀间隙”，还是“整体居中 + 间隙一致”。
-
space-between：第一项贴左、最后一项贴右，中间间隙相等（n 个子项 → n−1 个间隙） -
space-around：每项两侧有相等半间距，首尾项只有一侧有间隙 → 视觉上首尾离边距是中间间隙的一半 -
space-evenly：所有间隙（含首尾到边）完全相等 → 需要现代浏览器支持（IE 完全不支持） - 兼容性提醒：若需支持 IE11，只能用
space-between，并手动给首尾加margin模拟space-around
在 Grid 布局里能用 justify-content: space-between 吗？
能，但作用对象不同：它控制的是整个网格容器内 所有行或列轨道之外的空白，不是单个格子间的间隙。很多人误以为它能对齐 grid item，结果发现毫无反应。
- 对 grid 容器生效时，
justify-content调整的是列轨道整体在行轴（inline axis）上的分布，比如让三列整体左对齐、居中，或“撑满+等间隙” - 想控制格子间间隙，请用
gap、column-gap或row-gap，而不是justify-content - 如果 grid 容器宽度固定且小于所有列宽之和，
space-between会失效（无剩余空间可分配） - 示例场景：响应式导航栏用 grid 排三列 logo / nav / actions，用
justify-content: space-between让它们分别钉在左右和中间，比 flex 更易控制垂直对齐
移动端适配时 space-between 突然错位怎么办？
最常见原因是视口缩放、字体加载导致容器宽度动态变化，或者子元素内容溢出撑宽容器，破坏了原本的弹性计算前提。
立即学习“前端免费学习笔记（深入）”；
- 检查是否设置了
white-space: nowrap却忘了给子元素加overflow: hidden，文字长了直接撑破布局 - 避免在子元素上用
width: 100%+padding或border，盒模型偏差会让space-between计算错可用空间 - 安卓 webview 或旧版 safari 中，如果父容器用了
transform（如scale），可能干扰 flex 主轴尺寸计算，临时方案是加will-change: transform或换用gap - 真遇到极端情况（比如按钮文字长度不可控），宁可用 js 动态计算剩余空间再设
margin-left，也别硬扛渲染异常
真正难的不是写对那行 css，而是得时刻意识到：space-between 不是“自动均分”，它依赖一个稳定、可预测的主轴长度和明确的子项数量 —— 这两点在真实项目里，常常一碰就碎。