为什么CSS Flex工具栏中的图标会错位？

唯一稳定方案是position: fixed + display: flex + 显式宽高；fixed元素脱离文档流，未设宽高的Flex容器实际尺寸常为0，导致图标堆在左上角、不可点击，必须显式设置width和height。

flex容器没设宽高，图标堆在左上角

fixed元素脱离文档流，Flex容器又没显式声明width和height，实际渲染尺寸常为0——图标就挤在视口原点，点都点不到。这不是对齐问题，是容器根本没占空间。

1. 必须给工具栏容器设width（如width: 60px）和height（如height: 240px），不能靠子项撑开
2. flex-direction: column要明确写，否则默认横排，按钮全挤成一行
3. 按钮自身用flex: 0 0 auto，防SVG被拉伸变形
4. 别同时写right: 24px又加justify-content: flex-end——定位值和Flex对齐逻辑冲突

SVG没脱离行内流，baseline干扰对齐

SVG默认是inline元素，受vertical-align: baseline拖拽，align-items: center只能按这个错位后的盒模型居中，看起来永远偏下或浮高。

1. 给<svg>加display: inline-block或display: block
2. 删掉所有vertical-align相关设置，包括父容器的font-size: 0这类补救
3. SVG必须显式写width、height和规范viewBox="0 0 W H"（如viewBox="0 0 24 24"）
4. 避免用margin: auto——Flex下无效，还可能触发渲染异常

gap不生效，图标和文字紧贴着

gap只对Flex容器的直接子元素生效。如果图标和文字写在同一个<span>里，它们根本不是独立flex项目，gap压根不起作用。

1. 结构必须拆开：<button><i class="icon"></i><span>保存</span></button>，而不是<button><i class="icon"></i>保存</button>
2. 伪元素::before不算DOM节点，gap同样无效，得换成真实元素
3. 搭配align-items: center一起用，解决高度差异导致的视觉错位
4. 移动端需兼容IE11时，去掉gap，改用margin-inline-end: 4px

iOS Safari里按钮抖动或跳位

iOS Safari对position: fixed + display: flex组合渲染不稳定，软键盘弹出或快速滚动时，按钮会瞬间跳到顶部或底部——这不是bug，是WebKit视口锚点重计算延迟的表现。

1. 容器必须加will-change: transform，触发硬件加速，大幅缓解抖动
2. 避免同时设top/bottom和transform: translateY()，叠加使用反而加重跳变
3. 按钮统一设width: 100%和固定height（如height: 48px），别靠文字撑开
4. 检查computed样式里容器的width/height是否如预期——90%的“点不中”问题都源于这个值为0

真正麻烦的不是调几行CSS，而是看到图标偏移第一反应去改margin-top或vertical-align——这些都在绕开真实问题。先确认容器有没有宽高、SVG是不是块级、结构是不是独立flex项目，比盲目加样式更省时间。