按钮被压缩的根源是flex-shrink: 1，解决方法是用flex: 0 0 auto锁定尺寸，但等宽场景需改用flex: 1 0 0配合min-width，同时优先使用gap而非margin控制间距。
按钮被压缩的根源是flex-shrink: 1
Flex容器里，button默认继承flex-shrink: 1，只要父容器宽度不够，浏览器就会按比例压扁它——哪怕你写了width: 120px或min-width: 120px，都挡不住这个收缩行为。这不是bug，是Flex规范本身的设计逻辑。
- 检查Computed Styles里的
flex-shrink值，90%的“按钮变窄”问题都卡在这儿 - 别只改
width或min-width，它们对Flex项只是初始提示，不是硬约束 - 移动端尤其明显：小屏下按钮文字一多，
flex-shrink: 1立刻触发压缩，图标变形、文字换行错位
用flex: 0 0 auto锁定按钮尺寸
flex: 0 0 auto比单独写flex-shrink: 0更可靠，它同时禁用放大（flex-grow: 0）、禁用缩小（flex-shrink: 0）、基准宽度按内容撑开（flex-basis: auto）。适合工具栏里所有需要保持原始尺寸的按钮。
- 直接写
flex: 0 0 auto，别简写成flex: 0 0——后者flex-basis会回退到0，反而导致按钮塌缩 - 如果按钮内含SVG图标，必须额外加
flex-shrink: 0到<svg></svg>上，否则图标仍可能被压成一条线 - IE11需补
-ms-flex: 0 0 auto，否则flex-basis: auto解析异常
当按钮需要等宽时，别用flex: 0 0 auto
如果工具栏要求所有按钮视觉宽度一致（比如三个操作按钮并排），flex: 0 0 auto会让它们各自按文字长度定宽，“确定”和“导出全部配置并重启服务”按钮必然错落不齐。这时得换策略。
- 改用
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0），再配min-width: 80px - 必须加
min-width: 0（iOS Safari下建议用min-width: 1px），否则浏览器隐式min-width: min-content会覆盖flex-basis: 0 - 所有按钮统一设
box-sizing: border-box，避免不同浏览器对padding计算差异导致实际宽度偏差
gap比margin更能防压缩干扰
用margin控制按钮间距时，一旦按钮被压缩，margin-right可能因外边距合并失效，或在换行时残留多余空白；而gap是容器级属性，只作用于Flex项目之间，不参与压缩计算。
- 父容器直接设
gap: 8px，按钮自身不用写任何margin - 旧版Safari（iOS 14.5前）不支持
gap，fallback方案是margin-bottom+:nth-child(n)清除末尾margin-right - 别在同一个容器上混用
gap和margin，实际间距会变成两者相加，视觉双倍
flex: 0 0 auto和flex: 1 0 0时，稍不注意就会让某一项突然溢出或塌陷。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
