flex布局的flex-grow和flex-shrink是如何起作用的呢？
flex-grow，扩大因子，一般有如下结论：
- 如果子元素的扩大因子和大于1，那么应该这样计算
- 比如容器C，子元素A,B,D，扩大因子分别是x,y,z
- 扩大因子和 total =x+y+z、
- 剩余空间 V=Cwidth-(AWidth+BWidth+CWidth)
- 子元素分别增加宽度 Vx/total Vy/total V*z/total
例子：
三个子元素宽度为32，容器宽度为1920，剩余宽度就是1920-96=1824，三个子元素分别增长剩余空间的1/3，所以最后三者的宽度分别是640
- 如果子元素扩大因子和小于1，应该怎么计算呢？这时所有因子的和是1，也就是每个元素按照自身的flex-grow来扩大。也就是剩余空间不会全部分配给所有元素。自己可以试试。
flex-shrink 缩减因子 当子元素的宽度之和大于容器宽度时，缩减因子才有用
- 当缩减因子和大于1时，获取超出的宽度，按照缩减因子乘以宽度的比例拆分超出的宽度，再把子元素的宽度各自减去算出的超出宽度。
例子：
容器宽度1920，分别设置三个子元素宽度为900，1000，600，缩减因子分别为2，1，4，
根据算法，超出宽度为2500-1920=580；
比例计算如下：2900：1000：6004 = 9：5：12
子元素分别缩减：
580*9/26=200.76
580*5/26=111
580*12/26
所以最后三个元素的宽度分别是如图
- 当缩减因子小于1时，又如何呢？ 子元素缩减因子分别为0.1，0.2，0.3，这个时候超出的宽度就不是580了，而是580*（0.1+0.2+0.3），其他的计算方式还是一样。
根据以上试验，总结如下：扩大和缩减时，如果因子和小于1，都不会把所有空间分配，而是按照因子和的比例来分配总尺寸。 以上只是一般情况，当然扩大和缩小也有特殊情况，比如只有一个元素设置了扩大因子，其他元素没有设置，这时，就会尽量增大尺寸，而不是按照比例来了。
