CSS中的flex-shrink属性详解

描述
flex-shrink是Flexbox布局中控制子项（flex item）收缩能力的属性。当父容器空间不足时，flex-shrink决定了各子项如何按比例缩小以适应容器。默认值为1，表示允许收缩。若设为0，则禁止收缩。该属性与flex-grow（扩展）和flex-basis（基准尺寸）共同构成flex简写属性。

解题过程

1. 理解收缩场景
   当所有子项的基准尺寸（flex-basis）总和超过父容器宽度时，flex-shrink开始生效。例如：父容器宽400px，两个子项flex-basis均为300px，总宽度600px超出200px，此时需按规则收缩。

2. 收缩权重计算
   每个子项的收缩权重 = flex-shrink值 × flex-basis值。
   示例：

   • Item1: flex-shrink=2, flex-basis=300px
   • Item2: flex-shrink=1, flex-basis=300px
     总权重 = (2×300) + (1×300) = 900
     Item1收缩比例 = (2×300)/900 = 2/3
     Item2收缩比例 = (1×300)/900 = 1/3

3. 计算实际收缩量
   总溢出空间 = 600px - 400px = 200px
   Item1收缩量 = 200px × (2/3) ≈ 133.33px
   Item2收缩量 = 200px × (1/3) ≈ 66.67px
   最终宽度：
   Item1 = 300px - 133.33px = 166.67px
   Item2 = 300px - 66.67px = 233.33px

4. 特殊值处理

   • flex-shrink: 0 禁止收缩，元素可能溢出容器
   • flex-shrink: 负数无效，按0处理
   • 若所有子项flex-shrink均为0，则等比例溢出容器

5. 注意事项

   • 收缩计算受min-width限制，即使计算后宽度小于min-width，也会被限制为min-width
   • 与flex-grow不同，收缩计算需考虑flex-basis的权重，而扩展计算直接按flex-grow比例分配剩余空间