编辑“︁CSS弹性收缩（flex-shrink）”︁（章节）

== 代码示例 ==

=== 基本示例 ===
以下示例展示了三个弹性项目在容器空间不足时的收缩行为：

<syntaxhighlight lang="html">
<div class="container">
  <div class="item item1">项目1</div>
  <div class="item item2">项目2</div>
  <div class="item item3">项目3</div>
</div>
</syntaxhighlight>

<syntaxhighlight lang="css">
.container {
  display: flex;
  width: 300px; /* 容器宽度不足以容纳所有项目 */
  border: 1px solid black;
}

.item {
  flex-basis: 150px;
  padding: 10px;
  border: 1px solid gray;
}

.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 2; }
.item3 { flex-shrink: 0; } /* 不收缩 */
</syntaxhighlight>

'''输出效果：'''
* 项目1和项目2会收缩，但项目2的收缩比例是项目1的两倍（因为<code>flex-shrink: 2</code>）。
* 项目3不会收缩（<code>flex-shrink: 0</code>）。

=== 计算收缩比例 ===
假设三个项目的<code>flex-basis</code>均为150px，容器的总宽度为300px，则：
1. 总空间不足：<math>150 \times 3 - 300 = 150 \text{px}</math>
2. 收缩比例计算：
   * 项目1：<math>1 \times 150 = 150</math>
   * 项目2：<math>2 \times 150 = 300</math>
   * 项目3：<math>0 \times 150 = 0</math>
   * 总和：<math>150 + 300 + 0 = 450</math>
3. 实际收缩量：
   * 项目1：<math>150 \times \frac{150}{450} = 50 \text{px}</math> → 最终宽度：<math>150 - 50 = 100 \text{px}</math>
   * 项目2：<math>150 \times \frac{300}{450} = 100 \text{px}</math> → 最终宽度：<math>150 - 100 = 50 \text{px}</math>
   * 项目3：不收缩 → 最终宽度：150px