flex-shrink: 0 单独使用无法真正防止按钮被挤压，必须配合 flex: 0 0 auto、white-space: nowrap 及盒模型控制（如 min-width、padding、font-size 响应式调整）才能生效。
flex-shrink: 0 能阻止按钮被挤压，但只加这一条几乎必然失效——它不防换行、不拦溢出、不扛父容器塌缩，必须配合尺寸锚点和盒模型控制才能落地。
为什么按钮设了 flex-shrink: 0 还被压扁
常见错觉是“关掉收缩就完事”，实际中：flex-shrink: 0 只跳过浏览器的收缩分配流程，但以下情况仍会让按钮视觉上变窄或错位：
-
width或flex-basis写得过大（比如flex-basis: 100%），导致初始尺寸远超可用空间，flex-shrink: 0不阻止溢出，只禁压缩 - 按钮是
<button>元素，默认有min-width: auto，在 flex 容器里会锁死最小宽度；但若按钮内含图标或文字过长，又没配min-width: 0，反而触发内容撑开逻辑 - 父容器本身是 flex 且没设
min-width，比如侧边栏嵌套在main中，main被flex: 1压缩后，连带把按钮挤进窄缝 - 用了
flex: 1简写，它等价于flex: 1 1 0，会覆盖你单独写的flex-shrink: 0
按钮必须加 flex-shrink: 0 的典型场景
不是所有按钮都要锁，只对那些“失宽即失效”的元素下手：
- 带 SVG 图标的按钮：图标缩成 2px 就无法识别
- 搜索框右侧的提交按钮（如 ? 或 “搜索”）：它必须保持固定比例，不能随输入框拉伸/压缩
- 状态标签类按钮（如 “已读”、“VIP”、“禁用”）：文字被压成 “…” 就丢失语义
- 头像 + 文字组合按钮（如用户头像旁 “个人中心”）：头像宽高比必须稳定
真正生效的写法：三要素缺一不可
单写 flex-shrink: 0 是半截方案。要让按钮在窄屏下既不被压、也不溢出、还不换行，得同时满足：
立即学习“前端免费学习笔记（深入）”；
- 给按钮自身加
flex-shrink: 0—— 注意必须作用于<button>元素，不是外层<div> - 补上
flex: 0 0 auto替代单独写flex-shrink: 0，它明确声明“不增长、不收缩、基准按内容来”，优先级更高、不易被覆盖 - 加上
white-space: nowrap防文字折行；再配overflow: hidden; text-overflow: ellipsis;防超长文本撑破 - 若按钮含
<svg>，确保其有width: 1em; height: 1em; flex-shrink: 0;，并显式声明viewBox
响应式窄屏下的额外防坑点
小屏时按钮突然变形，往往不是 flex-shrink 失效，而是可用宽度被吃掉了：
- 检查 computed 样式里
padding和font-size：16px 字体 + 12px 水平 padding，一个 “登录” 按钮实际需要 >90px，而容器只分给它 72px - 媒体查询里同步调小
font-size和padding，比如@media (max-width: 480px) { .btn { font-size: 14px; padding: 6px 10px; } } - 避免
word-break: break-all或hyphens: auto，它们会让 “联系我们” 变成 “联-系-我-们”，比换行更糟 - Safari 旧版本对
flex-wrap支持弱，如果导航栏用了flex-wrap: wrap，记得加-webkit-flex-wrap: wrap
最容易被忽略的是：加了 flex-shrink: 0 后，按钮不再参与空间分配，但它可能横向溢出或触发滚动——这不是属性没起作用，而是你没给它设 min-width 或没约束父容器的 flex-wrap 行为。
