space-between才是真正的两端对齐，它将空白均分在子项之间，首项贴左、末项贴右；space-around则使相邻项间隙为边缘间隙的两倍，仅视觉近似两端对齐。
justify-content: space-around 确实能实现“视觉上两端对齐”，但它不是真正意义上的首尾贴边、中间等距——它会让每个子项**左右两侧留出等量空白**，导致相邻项之间空白是边缘空白的两倍。如果你要的是首项紧贴左边缘、末项紧贴右边缘、中间间隙均分（即标准的“两端对齐”），space-around 并不合适，该用 space-between。
为什么 space-around 看起来像两端对齐但实际不是
它的计算逻辑是：给每个子项的「左侧」和「右侧」各分配一份空白，于是：
- 首项左边有一份空白，右边也有一份 → 首项离左边缘 = 1份，离第二项 = 2份
- 中间项左右各一份 → 相邻项之间 = 2份
- 末项右边有一份 → 末项离右边缘 = 1份
结果就是：首尾有“半倍间隙”，中间全是“双倍间隙”。当子项宽度一致、数量少时，容易误判为“两端对齐”；一旦子项宽度不均（比如导航文字长短不一），立刻暴露不对称。
space-between 才是真正的两端对齐方案
它把全部可用空白均分在「子项之间」，首项自动顶左、末项自动顶右，不额外留边：
立即学习“前端免费学习笔记（深入）”；
- 必须至少有 2 个子项，否则唯一一项会贴左（
flex-start行为） - 子项不能设
margin-left/margin-right，否则会挤占本该用于分配的空白空间 - 如果父容器有
padding，记得用box-sizing: border-box确保宽度计算准确 - 移动端小屏换行时，
space-between在最后一行只剩 1–2 项时会严重失衡，需配合flex-wrap: wrap+ 伪元素补项（见下一条）
示例写法：
.nav { display: flex; justify-content: space-between; flex-wrap: nowrap; }
最后一行只剩一个子项时怎么保持两端对齐
这是 space-between 在 flex-wrap: wrap 场景下的经典缺陷：换行后末行若只有 1 个子项，它会独占整行并左对齐。解决办法是用伪元素模拟“占位项”：
- 给容器加
::after，设content: ""+flex: 0 0 - 子项宽度若用百分比（如
flex-basis: 25%），伪元素也要用同样单位，否则对不齐 - 绝对不要用
visibility: hidden或opacity: 0，它们仍参与 flex 计算；稳妥做法是height: 0; overflow: hidden; flex: 0 0 0; - 响应式断点里必须同步重置伪元素宽度，否则小屏下可能多出不可见空白
兼容性和替代方案提醒
space-around 在 iOS Safari 9–10 存在渲染偏差（间隙计算偏移），而 space-between 兼容性更好（IE10+、所有现代浏览器均支持）。如果项目需强兼容或子项宽度差异极大，更稳妥的做法是放弃 justify-content，改用：
- 每个子项设
flex: 1，再配text-align: center控制内部内容居中 - 用 CSS Grid 的
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))+justify-content: space-between（Grid 的 space-between 行为更可预测）
真正难的从来不是写哪一行 CSS，而是判断当前场景下，space-between 的“均分间隙”是否等于你心里想的“两端对齐”。别被视觉错觉带跑，先数清子项数量、看准是否换行、再决定要不要补伪元素。
