编辑“︁CSS弹性增长（flex-grow）”︁（章节）

== 基础示例 ==
以下示例展示三个项目的不同flex-grow值：

<syntaxhighlight lang="html">
<div class="container">
  <div class="item item1">1 (flex-grow:1)</div>
  <div class="item item2">2 (flex-grow:2)</div>
  <div class="item item3">3 (flex-grow:3)</div>
</div>
</syntaxhighlight>

<syntaxhighlight lang="css">
.container {
  display: flex;
  width: 600px;
  border: 1px solid #000;
}
.item {
  padding: 10px;
  border: 1px solid #ccc;
}
.item1 { flex-grow: 1; background: #ff9999; }
.item2 { flex-grow: 2; background: #99ff99; }
.item3 { flex-grow: 3; background: #9999ff; }
</syntaxhighlight>

'''输出效果'''：
<mermaid>
graph LR
    A[600px容器] --> B[1: 100px]
    A --> C[2: 200px]
    A --> D[3: 300px]
</mermaid>

解释：
* 总权重 = 1 + 2 + 3 = 6
* 剩余空间 = 600px - (初始内容宽度)
* 项目1获得：(1/6) × 剩余空间
* 项目2获得：(2/6) × 剩余空间
* 项目3获得：(3/6) × 剩余空间