flex:1与flex-grow:1最简单的区别与计算

一、flex的宽度计算方式是容器剩余空间+具有flex属性的元素自身尺寸：
例如在一个width:400px的容器中，有a、b、c 三个width:100px的元素，给a元素flex:2的属性，给b元素flex:1的属性，不给c元素。
计算宽度是：剩余空间（400px-300px）:100px + 参与flex项目尺寸200px=300px 再按3份的比例给a2份，b1份。
最后：a:width:200px ; b:width:100px ; c:width:100px

二、flex:grow的宽度计算方式只是容器剩余空间：
还是在一个width:400px的容器中，有a、b、c 三个width:100px的元素，给a元素flex-grow:2的属性，给b元素flex-grow:1的属性，不给c元素。
计算宽度是：剩余空间（400px-300px）:100px
剩余100px再按3份比例给a2份+自身本身尺寸，b1份+自身本身尺寸。
最后：a:width:166.7px ; b:width:133.3px ; c:width:100px

三、如果一个容器中的所有项目都给了flex或flex-grow属性，那么在计算中没有差别。两者最大的差别就在于flex的宽度是具有flex属性（即参与项目）尺寸再加上剩余空间。再除以份数剩以比例。
再举2个例子：
1、 在一个width:300px的容器中，有a、b、c 三个width:100px的元素，给a元素flex:3的属性，给b元素flex:2的属性，不给c元素。
计算宽度是：剩余空间0 + 参与flex项目尺寸200px=200px 再按5份的比例给a3份（200除以5剩以3），b2份。
最后：a:width:120px ; b:width:80px ; c:width:100px

2、 在一个width:300px的容器中，有a、b、c 三个width:100px的元素，给a元素flex-grow:3的属性，给b元素flex-grow:2的属性，不给c元素。
计算宽度是：剩余空间0 项目没有可分配的空间，尺度不会发生变化。
最后：a:width:100px ; b:width:100px ; c:width:100px

                                                                                  are U get?