justify-content: space-between 要生效需同时满足：父容器为 flex、至少两个可渲染子项、主轴方向匹配；单子项时退化为 flex-start，伪元素 ::after 可补救；多行时仅作用于每行内部，固定间隙应改用 gap + flex-start 或 margin 控制。
justify-content: space-between 能快速撑开工具栏两端，但必须满足三个硬性条件：父容器是 display: flex、至少两个可渲染子项、主轴方向与预期一致——缺一不可。
为什么工具栏左边有内容右边没对齐？
最常见原因是工具栏里实际只有一个可见子元素（比如只写了 <button>保存</button>），justify-content: space-between 在单子项时完全不生效，它会退化为默认的 flex-start 对齐，所有内容堆在左侧。
- 检查 DOM 中是否真有两个以上子节点（空
<div></div>算，但display: none或position: absolute的不算） - 别用
margin-left: auto去“模拟”右对齐——它和justify-content冲突，且破坏 Flex 的统一控制逻辑 - 轻量补救法：加一个
::after伪元素，content: ""即可让 Flex 认为有两个子项，触发space-between
移动端工具栏换行后最后一行错位怎么办？
当设置 flex-wrap: wrap 后，justify-content: space-between 只作用于**每一行内部**，最后一行若不满，就会左对齐、右侧大片留白——这不是 bug，是规范行为。
- 如果每行固定列数（如 4 个图标），可用
:nth-child(4n)配合margin-right: 0清除末尾间隙 - 更稳方案：放弃
space-between，改用gap: 12px+justify-content: flex-start，再靠margin-left: auto推最后一个按钮到右端 - 注意：iOS Safari 旧版本对多行
space-between支持极差，测试时务必用真实设备
Logo 左对齐、操作按钮右对齐，但中间要留固定 40px 空隙
justify-content: space-between 不接受自定义间隙值，它只会均分“剩余空间”，所以当设计要求是「固定空白」而非「动态均分」时，它就失效了。
立即学习“前端免费学习笔记（深入）”；
- 直接写
margin-left: 40px给第一个按钮，再给 Logo 加margin-right: auto，就能把按钮推到右侧并保持 40px 间距 - 如果按钮数量不固定，优先把 Logo 和按钮分别包进
<div class="logo"> 和 <code><div class="actions">，再对这两个容器用 <code>space-between - 别给子元素设
flex: 1或width: 100%，否则它们会抢走所有空间，space-between彻底失去作用
真正容易被忽略的是：子元素上若有 margin，它会叠加在 space-between 的间隙之外，导致实际间距翻倍或错乱。多数情况下，应该删掉所有 margin，只靠 Flex 自身对齐逻辑来控距。
