justify-content: space-between 在工具栏中易失效，仅适用于至少两个可见子项且单行显示场景；单个子项时左对齐，换行后末行左对齐，无法实现固定间隙，应改用 display: flex + gap + align-items 组合布局。
justify-content: space-between 能快速让工具栏两端对齐，但它不是万能解法——单个子项时失效、多行换行后末行左对齐、固定间隙需求下完全不可控。真要稳，得靠结构+gap+align-items组合。
为什么 justify-content: space-between 在工具栏里容易翻车
它只在“至少两个可见子项且单行显示”时才按预期工作：
- 只有一个按钮（比如仅登录入口）时，
justify-content: space-between退化为flex-start，按钮死贴左边 - 启用
flex-wrap: wrap后，每行独立计算间距，最后一行不满就必然左对齐——这不是 bug，是规范行为 - 设计稿要求 logo 和操作区之间严格留出 40px 空隙，
space-between会根据子项数量动态分配，根本做不到“固定值” - 子元素设了
flex: 1或width: 100%，会撑满容器，space-between失去作用对象
用 gap + 子容器分组替代 space-between
把逻辑从“靠分布算间隙”转为“明确划分区域+统一间隙控制”：
- 把 logo 单独包一层：
<div class="logo"></div>，操作按钮包进<div class="actions"></div> - 父容器设
display: flex、gap: 40px、align-items: center -
.logo加margin-right: auto推到最左；.actions默认靠右，别再给里面按钮加margin-left: auto - 所有按钮保持
flex: 0 0 auto，避免拉伸破坏布局
这样无论子项数量怎么变、是否换行，logo 和 actions 之间永远是 40px，且末行按钮仍能靠右对齐。
align-items: center 不生效？先看这三处
工具栏按钮没垂直居中，90% 不是 CSS 写错了，而是容器或子项约束没到位：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设高度——
height: 48px或min-height: 48px是必须的，否则交叉轴无参考基准 - 子元素写了
vertical-align: middle——对 Flex 项目完全无效，删掉 - 按钮用了
line-height居中文本——那是 inline 场景遗留写法，在 Flex 里应靠align-items和内部文本对齐控制
移动端换行后末行右对齐错乱怎么办
这不是 justify-content 的问题，是它本来就不处理跨行对齐。解决路径只有两条：
- 不换行：用
flex-wrap: nowrap+overflow-x: auto让小屏横向滚动（适合工具栏项少、操作高频场景） - 换行但保持右对齐：放弃
justify-content，改用gap+ 把末行包装进独立容器，并设margin-left: auto（需 JS 动态判断换行位置，复杂度高，慎用）
真正轻量的方案，是接受规范行为——换行就用 gap 统一间距，末行左对齐反而更符合阅读动线。强行右对齐常带来视觉割裂，尤其当按钮宽度不一时。
