1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: flex-grow
slug: Web/CSS/flex-grow
tags:
- CSS属性
- CSS弹性盒
- 布局
- 网络
translation_of: Web/CSS/flex-grow
---
<div>{{CSSRef}}</div>
<p><a href="https://wiki.developer.mozilla.org/en-US/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>
<p><a href="https://www.w3.org/TR/css-flexbox/#main-size">主尺寸</a>是项的宽度或高度，这取决于{{cssxref("flex-direction")}}值。</p>
<p>剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。</p>
<p><code>flex-grow</code> 与其他的flex属性{{cssxref("flex-shrink")}}和{{cssxref("flex-basis")}}一起使用，通常使用{{cssxref("flex")}} 速记来定义，以确保所有的值都被设置。</p>
<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
<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>
<p>更多属性和信息请参见<a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒子</a>。</p>
<h2 id="语法">语法</h2>
<pre class="twopartsyntaxbox notranslate"><a href="/zh-CN/docs/CSS/Value_definition_syntax" title="CSS属性值定义语法">CSS 属性值定义语法</a>: {{csssyntax("flex-grow")}}
</pre>
<pre class="notranslate">/* <number> values */
flex-grow: 3;
flex-grow: 0.6;
/* 全局 values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;</pre>
<h3 id="值">值</h3>
<dl>
<dt><code><number></code></dt>
<dd>参见 {{cssxref("<number>")}}。负值无效，默认为0。</dd>
<dt>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
</dt>
</dl>
<h2 id="例子："><font><font>例子：</font></font></h2>
<h3 id="HTML"><font><font>HTML</font></font></h3>
<div id="Live_Sample">
<pre class="notranslate"><h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are 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></pre>
<h3 id="CSS"><font><font>CSS</font></font></h3>
<pre class="notranslate">#content {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: stretch;
}
.box {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
.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>
<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" title="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>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">
<p><font><font>此页面上的兼容性表是根据结构化数据生成的。</font><font>如果您想贡献数据，请查看 </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> 并向我们发送请求请求。</font></font></p>
</div>
<p>{{Compat("css.properties.flex-grow")}}</p>
<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="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
<li>CSS Flexbox指南: <em><a href="https://wiki.developer.mozilla.org/en-US/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>
|
