flex-shrink 是控制元素在容器空间不足时相对于自身 flex-basis 的收缩份额，而非缩小比例；其实际收缩量由（自身 flex-basis × flex-shrink）占总权重的比例决定，且 flex-basis 默认为 auto。
flex-shrink 是什么，不是“缩小比例”
它控制的是元素在容器空间不足时，**相对于自身 flex-basis 的收缩份额**，不是按百分比缩放尺寸。很多人误以为 flex-shrink: 2 就是“缩小到原来的 1/2”，其实完全不是——它只是说：当所有子项都要收缩时，这个元素的收缩量是 flex-shrink: 1 元素的 2 倍。
flex-shrink 计算逻辑和常见错误现象
浏览器实际收缩量 = (自身 flex-basis × flex-shrink) ÷ 所有子项的（flex-basis × flex-shrink）之和 × 总溢出空间。关键点：
-
flex-basis默认值是auto（即内容宽度），不是0；如果没设宽，收缩行为会非常难预测 - 当某元素设了
flex-shrink: 0，它就“拒绝收缩”，哪怕内容撑爆容器，也不会让出空间 - 如果所有子项都设
flex-shrink: 0，溢出部分直接横向滚动或裁剪，不会触发任何收缩 - Chrome 和 Safari 对
flex-basis: auto的处理略有差异，尤其在含图片/内联元素的场景下容易出现不一致
什么时候该调 flex-shrink，什么时候不该
典型适用场景：工具栏按钮组、响应式卡片栅格、表单控件对齐。但要注意：
- 想让某个元素“固定宽度不收缩”，用
flex-shrink: 0，别只靠width—— 因为width不阻止 flex 收缩 - 想等比收缩多个同类型项，统一设
flex-shrink: 1即可，不用刻意设不同值 - 避免混用
flex: 1（隐含flex-shrink: 1）和显式flex-shrink: 0在同一容器里，容易因隐式值干扰导致布局跳变 - 移动端小屏下，
flex-shrink常被误当作“响应式缩放方案”，但它不改变字体、边距、图标大小，只动主轴尺寸——视觉上可能依然拥挤
调试技巧：快速定位收缩异常
遇到元素没按预期收缩，先检查这三项：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 查看该元素的 computed
flex-basis，确认是不是你想要的值（比如是否意外成了auto或0px） - 临时加
outline: 1px solid red，观察收缩前后真实占用空间变化，排除 margin/padding 干扰 - 把其他兄弟元素的
flex-shrink全部设为0，单独测试目标项行为——能快速判断是单个元素问题还是相对权重问题 - 注意父容器是否设置了
min-width或overflow: hidden，这些会截断 flex 布局的收缩反馈链
真正麻烦的从来不是 flex-shrink 值本身，而是它和 flex-basis、内容尺寸、盒模型之间的隐式耦合。改一个值前，先看一眼 computed 样式里的那几行数字。
