flex-grow属性。顾名思义，grow意味着增长，用于控制flex item的尺寸的伸展。将css修改为:
.box {
height: 100px;
min-width: 100px;
flex-grow:1;
}效果：
可以看到三个子元素平分了父元素的空间，因为此时它们的
flex-grow都是1。如果只有一个子元素设置了
flex-grow呢？css：
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; flex-grow: 1; }效果：
此时two和three的大小不变，而one占据了父元素剩余空间。
如果将one的
flex-grow改为2，而two和three改为1，我们看看会发生什么：css:
.box{ height: 100px; min-width: 100px; flex-grow:1; }
.one{ background: pink; flex-grow: 2; }效果：
可以看到one的宽度变成了two和three的两倍，因此flex item的尺寸和
flex-grow的值成正比。2. Flex Shrink
与
flex-grow相对的是
flex-shrink，
flex-shrink用于控制子元素尺寸超过flex container后，对子元素的压缩。请看示例：修改box的宽度为flex container的1/3，one、two、three的
flex-shrink分别为1，2，3：
.box{ height: 100px; width: 320px; }
.one{ background: pink; flex-shrink: 1; }
.two{ background: lightgreen; flex-shrink: 2; }
.three{ background: skyblue; flex-shrink: 3; }当窗口正常尺寸时，效果如下：
当我们压缩窗口使其变得更窄后，效果如下：
当flex container宽度变为540px后，子元素都被不同程度的压缩了。压缩后的one、two、three的宽度分别为250px、180px、110px，所以相比于初始宽度320px被压缩掉的宽度分别为70px、140px、210px，
