<p class="zw"><code>flex-grow</code>定义了弹性元素的扩展比例，它告诉该元素，当父元素的宽度大于弹性元素组合的宽度时该如何增加宽度。而<code>flex-shrink</code>恰恰相反，它定义当父元素宽度小于弹性元素组合宽度时，该如何缩小弹性元素的宽度。简而言之，<code>flex-grow</code>指定弹性元素将获得的空间；而<code>flex-shrink</code>则指定其要失去的空间。</p> <p class="zw">当我们将<code>flex</code>这个简写属性的值设置为<code>1</code>时，其实就是设置了相应的弹性元素的扩展和伸缩比例都为<code>1</code>，如下所示。</p> <pre class="代码无行号"><code>.item { flex : 1; }</code></pre> <p class="zw">等同于：</p> <pre class="代码无行号"><code>.item { flex-grow : 1; flex-shrink : 1; }</code></pre> <p class="zw">这是因为，在flexbox中，当弹性容器的空间不足以显示子元素时，浏览器会根据弹性元素个数自动均分父容器空间。但是这个行为导致的布局结果并不是我们想要的，我们可以修改这个默认行为——更改弹性元素的缩放比例，即定义<code>flex-shrink</code>值。</p> <p class="zw">这是弹性布局中又一个非常难理解的概念，为了帮助你理解，我们将会对第一个弹性元素添加一个略夸张的<code>flex-shrink</code>值，设置这个值以<code>8</code>开始。</p> <pre class="代码无行号"><code>.item:first-of-type { flex-shrink : 8; }</code></pre> <p class="zw">调整浏览器宽度，你会注意到，当父容器大小可以放下这两个元素的时候，布局是没有任何变化的。当继续缩小浏览器时，奇迹发生了，即弹性父容器的宽度小于弹性子元素组合的<code>flex-basis</code>值之和时，可以看到第二个元素没有变化，它的大小依然与<code>flex-basis</code>所定义的相同，而第一个元素则根据伸缩比例动态缩小了。</p> <p class="图"><img alt="1120.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/96.jpg"></p> <p class="图题">为元素指定减少空间的比例，可以有效帮助我们在小屏幕上控制元素展示效果。</p> <p class="zw">减小<code>flex-shrink</code>的值到<code>2</code>，你会发现第一个弹性元素变大了，而随着屏幕尺寸的减小，元素的缩小比例也相应变小了。</p> <pre class="代码无行号"><code>.item:first-of-type { flex-shrink : 2; }</code></pre> <p class="zw">使用<code>flex-shrink</code>，我们牢牢地控制住了弹性元素的伸缩比例。通过用不同的数值做实验，我们也观察到了屏幕尺寸变化时整个布局的变化情况。</p> <blockquote class="提示 editing-block"> <h3 class="sigil_not_in_toc">理解flex简写模式</h3> <p class="zw">一如我早前提到的，我们能够也应该把<code>flex-grow</code>、<code>flex-shrink</code>和<code>flex-basis</code>三者简写在<code>flex</code>属性里，浏览器会按如下顺序解释。</p> <pre class="代码无行号"><code>.item { flex : 1 1 420px; }</code></pre> <p class="zw">如果我们漏掉了<code>flex-shrink</code>，浏览器默认会将它设置为<code>1</code>，而<code>flex-basis</code>的浏览器默认值是<code>0%</code>。</p> </blockquote>
