编辑“︁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>）。