justify-content: space-between 没生效最常见原因是容器未设 display: flex，或子元素被 width: 100%、flex: 0 0 100% 等限制导致只剩一个有效项目；其次因容器宽/高不足、子项溢出或 flex-direction 与尺寸设置不匹配（如 column 未设 height），以及 flex-wrap 下仅作用于单行。
最常见原因是容器没设 display: flex，或者子元素本身是块级元素但被设置了 width: 100% 或 flex: 0 0 100%，导致只剩一个“视觉上可见”的项，space-between 失去分配对象。
另一个高频问题是父容器宽度不足、子元素总宽超出容器，浏览器会按最小尺寸渲染（比如文字换行、图片缩放），实际参与弹性布局的“项目数”变少，space-between 看似失效。
display 确实是 flex，且 flex-direction 是默认的 row
visibility: hidden 或 display: none 隐藏（后者完全不参与布局）justify-content 控制的是主轴上的对齐，所以它和 flex-direction 强绑定。主轴方向变了，间距分配的方向就跟着变。
默认 flex-direction: row 时，space-between 水平拉开子项；改成 column 后，它就垂直拉开 —— 但很多人忘了改 height，导致容器高度塌缩，看起来像没反应。
flex-direction: row → 依赖容器 width，子项水平排列，首尾贴边，中间等距flex-direction: column → 必须显式设置容器 height（或 min-height），否则高度由内容撑开，无“剩余空间”可分配flex-wrap: wrap，space-between 只作用于当前行/列，不跨行分配比如只有两个子项想等距分隔，但中间还要留白；或者需要首项左对齐、末项右对齐、中间项自动居中 —— 这些都不是 space-between 的设计场景。
更灵活的做法是放弃 justify-content，改用 margin 或 gap：
gap: 1rem（推荐）：现代浏览器支持良好，作用于所有 flex 项之间，包括换行后，且不影响首尾对齐方式margin-inline-start: auto 加在中间某个子元素上：手动“推开”它，适合固定数量子项的精细控制margin-left: auto + margin-right: auto 混搭，容易因盒模型计算出错导致偏移div.container {
display: flex;
gap: 16px; /* 替代 space-between，更可控 */
}
/ 不要这样写 /
div.container {
justify-content: space-between;
}
div.container > :nth-child(2) {
margin-left: auto; / 容易和 space-between 冲突 /
}
在 iOS Safari 或某些安卓 WebView 中，如果子元素含 input、textarea 或触发虚拟键盘的元素，space-between 可能因视口高度重算而跳动；更隐蔽的是，zoom: 1 或 -webkit-text-size-adjust: 100% 缺失时，字体放大也会挤压主轴空间，让 space-between 实际可用宽度变小。
viewport meta 标签并确保 width=device-width, initial-scale=1
min-width: 0，防止子项内联内容溢出干扰主轴计算document.body.style.border = '1px solid red' 快速验证容器是否真的占满预期宽度实际项目里，space-between 很少单独扛大梁；它最稳的用法是“确定数量 + 固定方向 + 明确首尾贴边”，其余情况不如老老实实用 gap 或网格布局。