flex-grow和flex-shrink的区别
1.flex-grow用于控制当所有伸缩项的宽度小于伸缩容器的宽度的时候，以便于所有伸缩项宽度的总和能够填满伸缩容器的宽度。
默认取值为0，不进行任何的扩充。
只有在所有伸缩项的宽度小于伸缩容器的宽度的时候才有效。
2.flex-shrink用于控制当所有伸缩项的宽度大于伸缩容器的宽度的时候，以便于所有伸缩项宽度的总和能够填满伸缩容器的宽度。
默认取值为1，等比缩小自己。
只有在所有伸缩项的宽度大于伸缩容器的宽度的时候才有效
flex-grow扩充公式
1.伸缩容器的宽度 - 所有伸缩项的宽度总和 = 剩余的宽度
600 - 300 = 300
2.剩余的宽度 / 所有需要扩充份数的总和 = 每一份的大小
300 / (1 + 4 + 8) = 23.07
3.当前伸缩项的宽度 + 需要份数的宽度
100 + 23.07 * 1 = ...
100 + 23.07 * 4 = ...
100 + 23.07 * 8 = ...
flex-shrink扩充公式
1.所有伸缩项的宽度总和 - 伸缩容器的宽度 = 溢出的宽度
900 - 600 = 300
2.计算权重值
每一个伸缩项需要的份数 * 当前伸缩项的宽度 然后再相加
1 * 300 + 4 * 300 + 8 * 300 = 3900
3.计算每个伸缩项需要缩小的范围
溢出的宽度 * 当前伸缩项的宽度 * 当前伸缩项需要的份数 / 权重值
300 * 300 * 1 / 3900 = ...
300 * 300 * 4 / 3900 = ...
300 * 300 * 8 / 3900 = ...
