justify-content: space-between 无反应是因为flex布局未启用或无剩余空间：父容器未设display:flex、子项总宽≥容器宽、仅一个子项、子项脱离文档流，或旧版safari不支持纯文本节点。
justify-content: space-between 为什么根本没反应
这不是写错了，而是 Flex 布局压根没启动或没空间可分。最常见原因有四个：
- 父容器没设
display: flex或display: inline-flex（只写flex-direction没用） - 子元素总宽度 ≥ 容器宽度，比如每个都加了
flex: 0 0 100%或width: 100%，Flex 无剩余空间可分配 - 只有一个子元素：space-between 只在 ≥2 个子项时触发，单个默认左对齐
- 子元素用了
position: absolute或float，脱离文档流后 Flex 直接忽略它
旧版 Safari 对纯文本节点也不认 space-between，得包一层并设 display: block。
子元素宽度不一致导致视觉上“不对齐”
space-between 的逻辑是：首项贴左、末项贴右、中间所有间隙等宽。但它不管子项自身宽度是否一致——如果按钮文字长度差异大（如“确定” vs “取消并导出全部数据”），视觉上就会觉得间隔被拉歪了。
- 解决方法不是调
justify-content，而是统一子项的宽度行为：用flex: 0 0 auto+min-width，或直接设固定宽 - 避免混用
margin-right：子元素自带margin会干扰间隙计算，建议清空后再交由 Flex 分配 - 若必须保留不同宽度，改用
gap+justify-content: flex-start更可控
多行换行时最后一行右偏是正常行为
justify-content: space-between 在 flex-wrap: wrap 容器里，是对每行独立计算的。最后一行不满时，它仍按“首尾贴边”分配剩余空间，结果就是悬浮居中——这不是 bug，是规范定义。
- 别指望
justify-content: flex-start能修正它，这个值只影响第一行起始位置 - 轻量解法：
.item:last-child { margin-right: auto; }，但要求子项不能有flex-grow: 1或width: 100% - 伪元素补位（
::after）可行，但宽度必须和子项单位一致（如都用%），且不能用visibility: hidden，要用height: 0; overflow: hidden;
误用 text-align: justify 替代 Flex 两端对齐
text-align: justify 和 justify-content: space-between 完全无关：前者只作用于**行内内容**（比如段落里的文字），且依赖空白符（空格/换行）才能生效；后者是对**Flex 子项**的分布控制。
把一段文字直接塞进 Flex 容器里，还指望 space-between 把字拉开——这是对象搞错了。真要文字两端对齐，得用 text-align: justify 配合伪元素占位（::after { content: "\00A0"; display: inline-block; width: 100%; }）。
复杂点在于：space-between 的生效前提太具体，而失效原因又常藏在看似无关的样式里——比如一个没清掉的 margin，或一个被遗忘的 flex: 1，就足以让整套布局“静音”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
