justify-content: space-between 未生效主因是父容器未设 display: flex，或 flex-direction 为 column 时作用于垂直方向；多行时仅首行生效，需用 gap 实现跨行均分。
justify-content: space-between 为什么没生效
常见原因是容器没设 display: flex，或者子项存在 flex-wrap: wrap 且只有一行但内容撑不满容器宽度。更隐蔽的是父容器 width 为 auto（比如 inline 元素或未设宽的 flex 容器），导致可用空间不可控。
实操建议：
- 确认父容器已显式声明
display: flex或display: inline-flex - 检查是否意外设置了
flex-direction: column—— 此时justify-content控制的是垂直方向，space-between表现为上下间距拉开 - 用浏览器开发者工具选中父容器，看 computed 样式里
width和height是否符合预期
space-between 在多行 flex 容器中的行为
justify-content: space-between 只对**当前主轴方向的单行内容**起作用。如果子项换行（flex-wrap: wrap），它不会让第二行的项目也“首尾对齐”，而是默认所有行左对齐（或按 justify-content 对齐第一行），其余行不参与间距分配。
实操建议：
- 需要多行均分，改用
gap属性（如gap: 16px），它对 flex 和 grid 都有效，且跨行一致 - 若必须用
space-between且只有两行，可考虑用伪元素占位：::after { content: ""; flex: 1; }，但仅适用于固定子项数场景 - 注意
gap在旧版 Safari（-webkit-gap 前缀
space-between 与 margin 混用的冲突
当子项自身有 margin-right 或 margin-left，会和 space-between 的计算叠加，导致首项右距、末项左距异常，甚至溢出容器。
实操建议：
- 统一用
gap替代子项 margin 实现间距，避免干扰justify-content - 若必须保留 margin，请确保只设单侧（如所有子项设
margin-right: 12px），再用:last-child { margin-right: 0; }清除末项 - Flexbox 的
space-between计算逻辑是：首项贴左、末项贴右，剩余空白均分给中间间隙 —— 所以它不关心子项内部 margin
替代方案：用 gap 实现更可控的均分间距
gap 是现代布局中比 justify-content: space-between 更可靠的选择，尤其在响应式场景下。它不依赖容器尺寸是否“撑满”，也不受换行影响，还能分别控制行列（row-gap / column-gap）。
示例：
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
注意点：
-
gap在 flex 布局中兼容性已很好（Chrome 84+、Firefox 63+、Safari 14.1+），IE 完全不支持 - 不要和
justify-content: space-between同时用，否则视觉效果会叠加混乱 - 当子项宽度动态变化（如
flex: 1）时，gap仍能稳定维持间距，而space-between可能因宽度计算偏差导致首尾贴边失败
space-between 看似简单，但一旦涉及换行、响应式缩放、或与其他布局属性共存，就容易掉进“看起来写了却没反应”的坑里。真正要均分间距，优先试 gap；非要用 space-between，务必确认容器主轴方向、尺寸和换行状态都符合它的单行假设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
