flex布局中三段式工具栏需用margin:auto实现分离：左区margin-right:auto，右区margin-left:auto，中间自然居中；避免float、absolute及display:none导致的兼容与响应问题。
flex布局中justify-content无法同时控制多组对齐
直接用 justify-content: space-between 或 justify-content: center 搞不定三段式工具栏，因为它们只作用于**同一行内所有子项的整体分布**，没法让左区、中区、右区各自按需对齐。
真正可行的解法是：把工具栏拆成三个独立容器，再用 flex 的 margin 或 auto 做“推挤”——这是最稳定、兼容性最好（IE11+）、且不依赖 JS 的方式。
- 左区：
margin-right: auto—— 把它往左顶死，右边留空给后续元素 - 中区：不设 margin，靠父容器
justify-content: center或直接用margin: 0 auto居中（需设宽度） - 右区：
margin-left: auto—— 把它往右顶死
用margin:auto实现三段分离的最小可行代码
不需要嵌套多层 flex 容器，一个 display: flex 父容器 + 三个子元素就够了。关键在 margin 的方向性作用：
.toolbar {
display: flex;
align-items: center;
}
.toolbar > :first-child {
margin-right: auto;
}
.toolbar > :last-child {
margin-left: auto;
}
这样左区紧贴左边缘，右区紧贴右边缘，中间那个自然被“挤”到视口水平中心位置。注意：中间元素不能设 flex: 1 或宽度过大，否则会撑开导致居中失效。
立即学习“前端免费学习笔记（深入）”；
为什么不用float或absolute？
float 在 flex 容器里完全失效；position: absolute 虽然能强行定位，但会脱离文档流，导致高度塌陷、响应式错位、键盘焦点顺序混乱——尤其在工具栏含按钮、下拉、输入框时，可访问性和维护成本飙升。
- 绝对定位后，
align-items: center失效，垂直居中得额外算top: 50%+transform - 屏幕缩放或字体放大时，
left/right像素值容易导致内容被裁切 - 无法和父容器的 padding / border 自动对齐，每次改边距都要同步调 absolute 值
移动端适配和折叠时的常见坑
三段式工具栏在小屏上常要收起中间或右侧功能（比如搜索框、用户头像），这时别用 display: none 直接隐藏——它会让 margin: auto 的计算逻辑中断，左右两段会突然撞在一起。
- 正确做法：用
visibility: hidden+width: 0+overflow: hidden隐藏但保留占位 - 或者更干脆：用媒体查询重置
margin，例如小屏下统一改为margin: 0 auto让三段叠成一列 - 千万别给中间区域设
flex: 0 0 auto后又加max-width却不配min-width，文字多时会换行破坏居中
最麻烦的其实是图标按钮和文字按钮混排时的基线对齐——align-items: center 对 img 和 button 默认 baseline 不一致，得统一加 vertical-align: middle 或设 line-height。
