flex-grow定义了弹性元素的扩展比例，它告诉该元素，当父元素的宽度大于弹性元素组合的宽度时该如何增加宽度。而flex-shrink恰恰相反，它定义当父元素宽度小于弹性元素组合宽度时，该如何缩小弹性元素的宽度。简而言之，flex-grow指定弹性元素将获得的空间；而flex-shrink则指定其要失去的空间。

当我们将flex这个简写属性的值设置为1时，其实就是设置了相应的弹性元素的扩展和伸缩比例都为1，如下所示。

.item { 
flex : 1; }

等同于：

.item { 
flex-grow : 1; 
flex-shrink : 1; }

这是因为，在flexbox中，当弹性容器的空间不足以显示子元素时，浏览器会根据弹性元素个数自动均分父容器空间。但是这个行为导致的布局结果并不是我们想要的，我们可以修改这个默认行为——更改弹性元素的缩放比例，即定义flex-shrink值。

这是弹性布局中又一个非常难理解的概念，为了帮助你理解，我们将会对第一个弹性元素添加一个略夸张的flex-shrink值，设置这个值以8开始。

.item:first-of-type { 
flex-shrink : 8; }

调整浏览器宽度，你会注意到，当父容器大小可以放下这两个元素的时候，布局是没有任何变化的。当继续缩小浏览器时，奇迹发生了，即弹性父容器的宽度小于弹性子元素组合的flex-basis值之和时，可以看到第二个元素没有变化，它的大小依然与flex-basis所定义的相同，而第一个元素则根据伸缩比例动态缩小了。

为元素指定减少空间的比例，可以有效帮助我们在小屏幕上控制元素展示效果。

减小flex-shrink的值到2，你会发现第一个弹性元素变大了，而随着屏幕尺寸的减小，元素的缩小比例也相应变小了。

.item:first-of-type { 
flex-shrink : 2; }

使用flex-shrink，我们牢牢地控制住了弹性元素的伸缩比例。通过用不同的数值做实验，我们也观察到了屏幕尺寸变化时整个布局的变化情况。

理解flex简写模式

一如我早前提到的，我们能够也应该把flex-grow、flex-shrink和flex-basis三者简写在flex属性里，浏览器会按如下顺序解释。

.item { 
flex : 1 1 420px; }

如果我们漏掉了flex-shrink，浏览器默认会将它设置为1，而flex-basis的浏览器默认值是0%。