用Flex布局实现工具栏按钮左对齐与右对齐，核心是设父容器display: flex，justify-content: space-between（适用于两个子容器）或对右对齐项设margin-left: auto；配合align-items: center垂直居中，并注意空白文本节点干扰。
用 Flex 布局实现工具栏按钮的左对齐与右对齐，核心是让容器成为弹性盒子，并控制子元素在主轴上的分布方式。不需要浮动、定位或手动调 margin，一行关键样式就能解决。
父容器设为 flex 并用 space-between
这是最直接的方式，适用于只有两个“功能性区块”的情况（比如左侧操作组 + 右侧功能按钮）：
- 给工具栏外层容器加 display: flex 和 justify-content: space-between
- 确保它里面只有两个直接子元素：一个装左对齐按钮的容器（如
<div class="toolbar-left">），另一个装右对齐按钮的容器（如<div class="toolbar-right">） - 这样第一个子元素自动贴左，最后一个子元素自动贴右，中间不留空隙
需要中间留空或加分割线？用 margin-left: auto
当工具栏里有多个按钮，但只想让某几个靠右，其余靠左，又不想拆成两个独立容器时：
- 保持父容器为 display: flex
- 给最右边那个按钮（或它的包裹容器）加 margin-left: auto
- 它会把前面所有元素“推”到左边，自己独占右侧剩余空间
- 适合动态添加按钮、或右侧只有一个操作项（如“保存”“导出”）的场景
垂直居中别漏掉 align-items
工具栏通常要和文字、图标等高度不一的元素对齐：
立即学习“前端免费学习笔记（深入）”；
- 在父容器上加 align-items: center，所有子项在垂直方向自动居中
- 如果某个按钮需要单独调整上下位置（比如下拉菜单箭头略低），可用 align-self: flex-end 覆盖
- 避免混用
vertical-align或line-height，它们和 flex 的垂直对齐逻辑可能冲突
注意隐藏的“空白节点”干扰
space-between 有时失效，往往不是代码写错，而是结构里多了看不见的东西：
- HTML 中换行、缩进产生的空格文本节点，会被 flex 当作一个子元素参与分配
- 打开浏览器开发者工具，检查 computed styles，确认 flex 容器下确实只有你要对齐的那几个有效子节点
- 解决办法：删掉多余换行，或给父容器加 font-size: 0（子元素再设正常 font-size），或用注释消除空白
