<p class="zw"><code>flex-grow</code>会设置弹性元素的扩展比例。扩展比例会定义一个弹性元素，当父容器中留有可用空间时，相较其他元素会扩展多少。<code>flex-grow</code>是flexbox模型中最难理解的概念之一，所以让我们还是用例子来演示吧。</p> <p class="zw">在上个例子中，我们给四个<code>article</code>元素分别设置了240像素的宽度。在小于960像素的环境下，对弹性容器设置<code>display:flex</code>，保证所有的<code>article</code>元素都会等分扩展填充。大于960像素的环境下，右侧留白。</p> <p class="zw">继续修改上面的例子，给所有的弹性元素都设置同样的扩展比例，让这些元素平均等分父容器的空间。</p> <pre class="代码无行号"><code>.item { flex-grow : 1; }</code></pre> <p class="图"><img alt="1114.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/90.jpg"></p> <p class="图题">给所有的弹性元素设置相同的扩展比例，保证它们平均等分所有空间。</p> <p class="zw">所有的<code>artice</code>元素在容器中等分排列，每一个的宽度都大于我们设置的<code>240</code>像素。但是，如果想调整这些弹性元素的大小，该怎么办呢？如果我们想把父元素的可用空间，以不同比例来切分，又该怎么办呢？为了让大家理解，在下面的例子中，我们会给第二个弹性元素分配两倍的空间。如你所见，我们会对所有的弹性元素设置扩展比例为<code>1</code>，对第二个设置为<code>2</code>。</p> <pre class="代码无行号"><code>.item { flex-grow : 1; } .item:nth-of-type(2) { flex-grow : 2; }</code></pre> <blockquote class="提示 editing-block">
