flex-shrink控制子元素在容器空间不足时的收缩比例，数值越大收缩越多，0表示不收缩。例如两元素宽200px，容器300px，flex-shrink为1和2时，后者比前者多收缩一倍。图标等固定尺寸元素建议设为0，文本容器可保持默认1，通过调整该值可控制布局弹性。
在 Flex 布局中，flex-shrink 属性控制子元素在容器空间不足时的收缩比例。它决定了各个子项在被压缩时“让出多少空间”，直接影响它们最终显示的尺寸。
flex-shrink 的基本作用
当 Flex 容器的主轴方向总内容宽度超过容器本身时，子元素需要缩小以适应空间。此时 flex-shrink 就开始起作用。
该属性接受一个无单位的数字，默认值为 1。数值越大，元素被压缩的程度越高；数值为 0 表示不参与收缩。
收缩的计算逻辑
浏览器会根据每个子元素的 flex-basis（或 width）、flex-shrink 系数 和内容大小综合计算实际收缩量。
具体过程如下：
- 先确定每个子项的基准尺寸（flex-basis 或 width）
- 计算所有子项总基准尺寸超出容器的部分（溢出量）
- 根据每个子项的 flex-shrink 值加权分配这个溢出量
- flex-shrink 值大的元素承担更多收缩责任
例如：两个子元素宽度均为 200px，容器宽 300px。若它们的 flex-shrink 分别是 1 和 2，则第二个元素会比第一个多收缩一倍的空间。
常见使用场景与建议
合理设置 flex-shrink 可避免内容被不合理压缩。
- 对于图标或固定尺寸组件，可设 flex-shrink: 0 防止其被挤压变形
- 文本类容器可保持默认值 1，让它在空间紧张时自动调整
- 想让某个区域“更灵活地让步”，就提高它的 flex-shrink 值
基本上就这些。理解 flex-shrink 的加权分配机制，就能更好掌控 Flex 子元素在拥挤时的表现。
