justify-content必须写在父容器上，子元素加了无效；它仅对display: flex/inline-flex容器生效，控制其直接子元素在主轴上的分布，常见错误包括误加子元素、父容器未设flex、子元素脱离文档流或仅1个子元素时无间隙效果。
justify-content 必须写在父容器上，子元素加了也没用
很多人写完 justify-content: space-between 发现没反应，第一反应是“CSS 写错了”，其实大概率是加在了子元素上。这个属性只对 display: flex 或 display: inline-flex 的父容器生效，控制的是它**直接子元素**在主轴上的分布方式。
常见错误包括：
- 给子元素写
justify-content（完全无效） - 父容器漏写了
display: flex，或被其他样式（比如display: inline）覆盖 - 父容器是
div但被设成了display: block，而子元素用了float或position: absolute，导致脱离文档流，不再参与 flex 分布
space-between 在只有 1 个子元素时会左对齐，不是居中
justify-content: space-between 的逻辑是：首尾贴边，中间均分剩余空间。这意味着它至少需要 2 个子元素才能表现出“间隔”效果。如果只剩 1 个，它就老老实实靠左（flex-direction: row 下）或靠上（column 下），不会自动居中。
所以别指望它“智能降级”。实际场景中容易踩坑的地方有：
- 动态渲染列表，数据为空或仅 1 条时布局突变
- 用
v-if/*ngIf控制子元素，但没同步处理容器的对齐 fallback - 误把
space-between当成通用居中方案，结果小屏下只剩一个按钮，它就死贴左边
子元素宽度撑满容器时，space-between 看起来“失效”
即使写了 display: flex 和 justify-content: space-between，如果所有子元素加起来宽度 ≥ 容器宽度，就不会有“剩余空间”可分配，自然看不到间隙。
典型诱因包括：
- 子元素设置了
width: 100%或flex: 1（尤其在只有 1 个子项时） - 子元素是未设宽的
inline元素（如纯文字、span），默认不收缩，flex 容器会把它当刚性块处理 - 子元素内有长单词或固定宽内容（如图片、
pre），触发换行或溢出，破坏单行 flex 主轴
调试建议：临时加 outline: 1px solid red 到子元素，看真实尺寸是否超出预期；或用浏览器 devtools 检查 computed width 是否被撑开。
space-between、space-around、space-evenly 的间隙数量根本不同
三者名字都带 “space”，但数学逻辑差很远。选错会导致留白失控，尤其在响应式或动态数量场景下。
假设容器剩余空间为 R，子元素数量为 n：
-
space-between：产生n−1个间隙，每个 =R / (n−1)；首尾无空隙 -
space-around：每个子元素两侧各分得R / (2n)，所以相邻元素间是R / n，首尾到边是它的一半 -
space-evenly：产生n+1个等隙，每个 =R / (n+1)；首尾到边 = 元素间 = 所有间隙
IE11 支持前两者，但不支持 space-evenly；移动端 Safari 对 space-evenly 的早期版本也有兼容问题。真正容易被忽略的是：如果你同时给子元素设了 margin，它会叠加在这些间隙之外——多数时候这不是你想要的，应优先删掉 margin，只靠 justify-content 控制间距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
