flex-grow

定义：flex-grow设置了一个flex元素在其父容器里的伸长系数，规定了 剩余宽度/高度 (剩余宽度/高度 = 父容器宽度/高度 - 所有flex子元素的宽度/高度之和) 按照多大的比例分配给flex子元素。默认值为0，既不分配剩余宽度/高度。

当flex-grow的值为0时：

我们可以看到，当flex元素的flex-grow为0时，flex元素并不会伸长去填满父容器的剩余空间，而是以设定的宽度显示。

当flex-grow 全部为相同的大于0的值时：

可以看到，当flex元素的flex-grow都设为相同的大于0的值时，所有flex元素的伸长效果完全相同，每个元素的伸长长度/宽度 = 父容器剩于宽度/高度 * (该元素flex-grow值/所有flex元素flex-grow之和)， 在该例子中， flex元素的伸长宽度/高度 = 200 * 2/6

当flex-grow为大于0不相同的值时：

可以看到，当第三个flex元素的flex-grow被设为2了以后，其伸长的宽度是100px, 是其他flex元素的两倍。也符合： 每个元素的伸长长度/宽度 = 父容器剩于宽度/高度 * (该元素flex-grow值/所有flex元素flex-grow之和)，在该例子中， flex元素的伸长宽度/高度 = 200 * 2/4