按钮文字换行时图标错乱，需用嵌套flex容器隔离图文布局：图标设flex-shrink:0并显式控制高度与基线，文字区域用flex:1+min-width:0+overflow-wrap:break-word确保换行且不挤占图标位置。
按钮文字换行时图标位置错乱怎么办
Flex 默认对齐方式会让 flex-direction: row 下的图标和文字在换行后脱离视觉关联——文字折行，图标却还卡在第一行末尾。根本原因是没隔离图标与文字的布局上下文。
解决思路是：把每个按钮内部再套一层 display: flex 容器，让图标固定左对齐，文字区域用 flex: 1 占满剩余空间并设置 word-break: break-word 或 overflow-wrap: break-word。
- 图标用
flex-shrink: 0防止被压缩变形 - 文字容器加
min-width: 0（防止长单词撑开父容器） - 避免对按钮整体设
white-space: normal，它会影响图标对齐
如何让图标始终垂直居中且不随文字行数变化偏移
图标在多行文字下“看起来下沉”，其实是默认 align-items: stretch 拉伸了图标高度。必须显式控制图标对齐基准。
推荐写法：align-items: center 放在按钮内层 flex 容器上，同时给图标加 height: 1.2em 和 line-height: 1.2em（或使用 vertical-align: middle 配合 display: inline-block），确保基线稳定。
立即学习“前端免费学习笔记（深入）”；
- 慎用
margin-top手动调位置——响应式断点一变就失效 - 如果图标是 SVG，记得加
flex-shrink: 0和height: 1.2em，否则可能被压缩成一条线 - 不要依赖
padding模拟垂直居中，它无法适配不同行数
按钮列表整体排列不均匀、间距难控制
直接对按钮父容器设 display: flex; flex-wrap: wrap 很容易出现最后一行按钮左对齐、空隙不均的问题。
更可控的做法是：父容器用 display: grid，配合 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))；或者坚持 Flex，但必须加 justify-content: space-between 并配合 gap: 0.75rem（注意：IE 不支持 gap，需 fallback 用 margin）。
- 若用
margin实现间隙，按钮需加margin-right和margin-bottom，并用:nth-child(n)清除每行末尾的margin-right -
flex-basis设为calc(33.333% - 0.5rem)这类值时，务必检查小屏下是否溢出 - 移动端建议加
flex-wrap: wrap+max-width: 100%，防止超宽容器破坏布局
图标+文字按钮在 Safari 中换行异常
Safari（尤其 iOS 15–16）对 flex: 1 内部的 white-space: normal 处理有偏差，常导致文字不换行或图标被挤到下一行开头。
实测有效解法：在文字容器上强制加 min-width: 0 和 width: 0（触发 shrink-to-fit 行为），再配合 overflow-wrap: anywhere（比 break-word 兼容性更好）。
- 避免用
word-break: break-all，它会在任意字母处截断，影响可读性 - SVG 图标请确保没有
viewBox缩放问题，某些旧版 Safari 会忽略height只认width - 真机调试时，务必在 iOS Safari 开启「显示开发者工具」，用「元素检查」确认 computed styles 是否生效
实际最易被忽略的是文字容器的 min-width: 0 ——它不是锦上添花，而是 Safari/Firefox 下换行逻辑成立的前提。没有它，flex: 1 在多数浏览器里根本不会收缩让文字换行。
