CSS3弹性布局之flex-shrink属性的通俗解释和计算过程演示
CSS3弹性布局之flex-shrink属性的通俗解释和计算过程演示
1. 核心概念
flex-shrink决定了当容器空间不足时，各个子项如何按比例缩小。- 默认值为
1：所有子项默认按相同比例缩小。 - 值越大：该项目被压缩得越狠。
2. 示例场景
假设有以下三个子项，容器宽度为 400px：
| 子项 | 原始宽度 | flex-shrink值 |
|---|---|---|
| 项目1 | 200px | 1 |
| 项目2 | 300px | 2 |
| 项目3 | 200px | 3 |
总需求宽度 = 200 + 300 + 200 = 700px
容器实际宽度 = 400px
空间不足量 = 700 - 400 = 300px（需要压缩这300px）
3. 计算步骤
步骤1：计算权重分母
将每个子项的 原始宽度 × flex-shrink值 相加：
(200 × 1) + (300 × 2) + (200 × 3) = 200 + 600 + 600 = 1400
步骤2：计算每个子项的压缩比例
- 项目1压缩比例 =
(200 × 1) / 1400 = 200/1400 ≈ 0.1429 - 项目2压缩比例 =
(300 × 2) / 1400 = 600/1400 ≈ 0.4286 - 项目3压缩比例 =
(200 × 3) / 1400 = 600/1400 ≈ 0.4286
步骤3：计算每个子项实际压缩量
将 压缩比例 × 总不足空间（300px）：
- 项目1压缩量 =
0.1429 × 300 ≈ 42.86px - 项目2压缩量 =
0.4286 × 300 ≈ 128.57px - 项目3压缩量 =
0.4286 × 300 ≈ 128.57px
步骤4：计算最终宽度
- 项目1最终宽度 = 200 - 42.86 ≈ 157.14px
- 项目2最终宽度 = 300 - 128.57 ≈ 171.43px
- 项目3最终宽度 = 200 - 128.57 ≈ 71.43px
4. 效果对比
| 子项 | 原始宽度 | 压缩后宽度 | 压缩比例 | 直观表现 |
|---|---|---|---|---|
| 项目1 | 200px | 157.14px | 14.29% | 压缩最少 |
| 项目2 | 300px | 171.43px | 42.86% | 压缩较多 |
| 项目3 | 200px | 71.43px | 42.86% | 压缩最多 |
5. 关键规则总结
- 分母计算：
Σ(原始宽度 × flex-shrink)，代表总压缩权重。 - 压缩比例：每个子项的
(原始宽度 × flex-shrink) / 分母。 - 压缩量：
压缩比例 × 总不足空间。 - 最终宽度：
原始宽度 - 压缩量。
6. 实际应用技巧
- 禁止压缩：设置
flex-shrink: 0，固定子项宽度。 - 优先级控制：通过调整
flex-shrink值，控制不同子项的压缩程度。 - 响应式布局：结合
flex-grow和flex-basis实现灵活伸缩。