关于flex盒模型里项目放大比例的计算规则（flex-grow和flex属性）

关于flex盒模型里项目放大比例的计算规则（flex-grow和flex区别）

flex-grow属性：

我们在使用flex布局的时候，遇到需要项目放大的问题，一般都是使用flex-grow属性来设置，规则如下：
flex-grow的默认值为0，即如果存在剩余空间，也不放大，负值无效。
当给项目flex-grow属性设置一个非负数值时，该项目将分配剩余空间而放大。
此处剩余空间指 容器宽度 减去 一行内所有项目宽度之和。
每个项目按flex-grow属性的值的比例来分配剩余空间。

举个例子，这里容器ul的宽度为800px，每个项目li宽度为100px，我共设置了5个li，剩余空间就是800px-5*100px=300px。

此时若给项目设置flex-grow属性设置属性值如下，
则第一个li宽度为自身宽度100px+剩余空间300pxflex-grow属性的比例1/6=150px，第二个li的宽度为100px+300px</