直接用 justify-content: space-between 做工具栏会导致单按钮左对齐、换行后各行独立计算间隙、动态插入无过渡动画；应改用 height + align-items: center + gap，并规范 flex-basis 动画与结构拆分。
为什么直接用 justify-content: space-between 做工具栏会出问题
单个按钮时它退化为左对齐，换行后每行独立计算间隙，最后一行不满就必然左对齐——这不是 bug，是规范行为。更麻烦的是，当 JS 动态插入新按钮时，space-between 无法触发重排动画，新按钮“啪”一下闪现，没有过渡。
用 gap + align-items + 明确高度才是稳解
工具栏必须有明确的交叉轴参考基准，否则 align-items: center 就没效果。常见踩坑点：
- 父容器没设
height或min-height，导致按钮在纵向上“悬浮”或贴顶 - 按钮本身用了
flex: 1或width: 100%，撑满整行后align-items失效 - 同时在子元素上写
margin和容器级gap，实际间距变成两者叠加
正确写法：.toolbar { display: flex; height: 48px; align-items: center; gap: 12px; }，按钮保持 flex: 0 0 auto 即可。
动态增删按钮时，flex-basis 过渡为什么静默失效
flex-basis: auto 不能参与 transition，因为浏览器无法对 “auto” 插值——它不是具体数值，而是计算后才得出的结果。现象是：加类后按钮瞬间变宽，毫无动画。
- 插入前先设
el.style.flexBasis = '0px'，再强制读取el.offsetHeight触发重排 - 紧接着设目标值
el.style.flexBasis = '120px'，并确保已声明transition: flex-basis 0.25s ease - 删除时别直接
el.remove()，先加.removing类，设flex-basis: 0; opacity: 0; overflow: hidden，监听transitionend且校验e.propertyName === 'flex-basis'后再移除节点
移动端换行后右对齐按钮错位，怎么绕过
justify-content: space-between 在多行 Flex 中只作用于每行内部，无法控制最后一行。真正可行的是结构微调：
- 把 logo 和操作区拆成两个子容器：
<div class="logo"></div>和<div class="actions"></div> - 给 toolbar 设
gap: 40px和align-items: center - 给
.logo加margin-right: auto推左，.actions默认靠右，不额外设 margin - 这样换行后，
.actions始终作为独立 flex 项目存在，不会被space-between的行内逻辑干扰
复杂点在于：每个按钮的点击热区必须 ≥44×44px，且要加 aria-label；如果工具栏嵌在 position: fixed 的父层里，iOS 键盘弹出会错位——这时候得放弃 fixed，改用 flex 布局整体控制高度与滚动关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
