Re-translated from the English version to replace outdated content

1 files changed, 66 insertions, 77 deletions

diff --git a/files/zh-cn/web/css/flex-grow/index.md b/files/zh-cn/web/css/flex-grow/index.md
index cfc8dcdf50..fe1de14dd9 100644
--- a/files/zh-cn/web/css/flex-grow/index.md
+++ b/files/zh-cn/web/css/flex-grow/index.md
@@ -2,75 +2,83 @@
 title: flex-grow
 slug: Web/CSS/flex-grow
 tags:
-  - CSS属性
+  - CSS
   - CSS弹性盒
   - 布局
   - 网络
+  - recipe:CSS属性
+browser-compat: css.properties.flex-grow
 translation_of: Web/CSS/flex-grow
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/zh-CN/docs/Web/CSS">CSS</a>属性 <strong><code>flex-grow</code></strong>设置了一个flex项<a href="https://www.w3.org/TR/css-flexbox/#main-size">主尺寸</a>的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。</p>
+CSS 属性 **`flex-grow`** [CSS](/en-US/docs/Web/CSS) 设置 flex 项[主尺寸](https://www.w3.org/TR/css-flexbox/#main-size) 的 flex 增长系数。
 
-<p><a href="https://www.w3.org/TR/css-flexbox/#main-size">主尺寸</a>是项的宽度或高度，这取决于{{cssxref("flex-direction")}}值。</p>
+{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
 
-<p>剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。</p>
+## 语法
 
-<p><code>flex-grow</code> 与其他的flex属性{{cssxref("flex-shrink")}}和{{cssxref("flex-basis")}}一起使用，通常使用{{cssxref("flex")}} 速记来定义，以确保所有的值都被设置。</p>
+满足[CSS 属性值定义语法](/zh-CN/docs/CSS/Value_definition_syntax) {{csssyntax("flex-grow")}}。
 
-<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
+```css
+/* <number> 值 */
+flex-grow: 3;
+flex-grow: 0.6;
 
-<div class="hidden">
-<p><font><font>该交互式示例的源存储在GitHub存储库中。</font><font>如果您想为交互式示例项目做出贡献，请克隆</font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-examples</font></font></a><font><font>并向我们​​发送请求请求。</font></font></p>
-</div>
+/* 全局值 */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: revert;
+flex-grow: unset;
+```
 
-<p>更多属性和信息请参见<a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒子</a>。</p>
+`flex-grow` 的属性规定为一个 `<number>`。
 
-<h2 id="语法">语法</h2>
+### 值
 
-<pre class="twopartsyntaxbox notranslate"><a href="/zh-CN/docs/CSS/Value_definition_syntax" title="CSS属性值定义语法">CSS 属性值定义语法</a>: {{csssyntax("flex-grow")}}
-</pre>
+- `<number>`
+  - : 参见 {{cssxref("&lt;number&gt;")}}。负值无效，默认为 0。
 
-<pre class="notranslate">/* &lt;number&gt; values */
-flex-grow: 3;
-flex-grow: 0.6;
+## 描述
 
-/* 全局 values */
-flex-grow: inherit;
-flex-grow: initial;
-flex-grow: unset;</pre>
+这个属性规定了 `flex-grow` 项在 flex 容器中分配剩余空间的相对比例。
+[主尺寸](https://www.w3.org/TR/css-flexbox/#main-size)是项的宽度或高度，这取决于{{cssxref("flex-direction")}}值。
 
-<h3 id="值">值</h3>
+剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。
 
-<dl>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>参见 {{cssxref("&lt;number&gt;")}}。负值无效，默认为0。</dd>
- <dt>
- <h3 id="正式语法">正式语法</h3>
+ `flex-grow` 与其他的 flex 属性{{cssxref("flex-shrink")}}和{{cssxref("flex-basis")}}一起使用，通常使用{{cssxref("flex")}} 速记来定义，以确保所有的值都被设置。</p>
 
- {{csssyntax}}
- </dt>
-</dl>
+## 正式定义
 
-<h2 id="例子："><font><font>例子：</font></font></h2>
+{{cssinfo}}
 
-<h3 id="HTML"><font><font>HTML</font></font></h3>
+## 正式语法
 
-<div id="Live_Sample">
-<pre class="notranslate">&lt;h4&gt;This is a Flex-Grow&lt;/h4&gt;
-&lt;h5&gt;A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .&lt;/h5&gt;
-&lt;div id="content"&gt;
-  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
-  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
-  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
-  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
-  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
-  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
-&lt;/div&gt;</pre>
+{{csssyntax}}
 
-<h3 id="CSS"><font><font>CSS</font></font></h3>
+## 样例
 
-<pre class="notranslate">#content {
+### 设置 flex 项目增长因子
+
+#### HTML
+
+```html
+<h4>这展示了 flex 增长</h4>
+<h5>A,B,C 和 F 具有 flex-grow:1。D 和 E 具有 flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+```
+
+#### CSS
+
+```css
+#content {
   display: flex;
 
   justify-content: space-around;
@@ -86,43 +94,24 @@ flex-grow: unset;</pre>
 .box1 {
   flex-grow: 2;
   border: 3px solid rgba(0,0,0,.2);
-}</pre>
-</div>
-
-<h3 id="结果"><font><font>结果</font></font></h3>
+}
+```
 
-<p>{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}</p>
+#### 结果
 
-<h2 id="Specifications" name="Specifications">规范</h2>
+{{EmbedLiveSample('Setting_flex_item_grow_factor', '700px', '300px', '', 'Web/CSS/flex-grow')}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><font><font>规范</font></font></th>
-   <th scope="col">状态</th>
-   <th scope="col">备注</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a class="external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-grow"><font><font>CSS灵活包装盒布局模块</font></font></a></td>
-   <td><font><font>{{Spec2('CSS3 Flexbox')}}</font></font></td>
-   <td>初步定义</td>
-  </tr>
- </tbody>
-</table>
+## 规范
 
-<p><font><font>{{cssinfo}}</font></font></p>
+{{Specifications}}
 
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
+## 浏览器兼容性
 
-<p>{{Compat("css.properties.flex-grow")}}</p>
+{{Compat}}
 
-<h2 id="参见">参见</h2>
+## 参见
 
-<ul>
- <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒子</a></li>
- <li>CSS Flexbox指南: <em><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
- <li>CSS Flexbox指南: <em><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
- <li><a href="https://css-tricks.com/flex-grow-is-weird/">`flex-grow` is weird. Or is it?</a> Manuel Matuzovic在CSS-Tricks上的文章，说明了flex-grow的工作原理。</li>
-</ul>
+- [使用 CSS 弹性盒子](/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
+- CSS Flexbox 指南：[弹性盒子的基本概念](/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+- CSS Flexbox 指南：[控制Flex子元素在主轴上的比例](/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)
+- [\`flex-grow\` is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/) Manuel Matuzovic 在 CSS-Tricks 上的文章，说明了 flex-grow 的工作原理