flex=n跟flex-grow=n到底有什么不同

最近在进行项目的时候使用flex与flex-grow出现了一些细微差别。
在用弹性盒子进行布局的时候，我们进行宽度处理时候，单独使用flex-grow对项目进行比例分配时，感觉跟预期的效果不一样，这是怎么回事呢。
在搞明白有什么差别之前先了解一下flex-grow属性跟flex的默认值问题，
根据菜鸟文档里面显示的
flex：是flex-grow，flex-shrink，flex-basis的简写，他们的默认值分别为0，1，auto；还有就是他们取值范围，flex-grow，flex-shrink可以是数字，但是flex-basis的取值是auto或者%，px，em或其他长度单位。
根据阮一峰Flex 布局教程讲解的：
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
所以重点是剩余空间是怎么计算成为了关键，根据一个弹性盒子项目来说，在不设定大小尺寸的时候，它的初始空间（也就是项目的长度）并不是0，是auto（元素的内容所占空间），是不是感觉说那么多，完全没有明白，没有关系，代码图像会帮助你。
就先举一个flex=1跟flex-grow=1的案例吧，flex=1时根据这个简写，那么3个属性值分别为flex-grow=1，flex-shrink=1，flex-basis因为取值范围是auto跟其他长度单位的原因，flex-basis会自动转换为0%（也就是项目初始空间为0），而flex-grow=1时，其他2个没有写就是默认值，分别为flex-shrink=1，flex-basis=auto；好解释完了开始上代码：


在没有添加任何内容和没有定义项目的长度的时候，他们好像是都是一样的效果，都是进行1：1的比例的平分，然后我们在加入内容试试

当我们加入一个文字以后，flex=1；没有变化，但是flex-grow=1；发生变化，因为flex-grow=0；的时候，flex-basis=auto；项目初始长度等于元素内容的长度，蓝色区域有一个文字，文字浏览器默认为16px，所有蓝色区域的项目初始长度为16px；计算剩余空间尺寸就是600px-16px=584 px；因为flex-grow都等于1（相当于剩余空间平分给绿色跟蓝色），所以分配剩余空间计算结果584px/2=292px, 绿色区域的是292px，蓝色区域为292px+16px（项目初始长度）=308px。
这是在没有定义项目宽度时候，要进行弹性盒子区域按比例划分的时候，请选择flex=n（n为非负自然数）来进行划分。
我们在定义一个宽度再来试试看：

我们设置了3个区域粉色的宽度固定100px，绿色跟蓝色都定了50px。
当使用flex=n来分配时，粉色的宽度为100px；绿色flex=2，蓝色flex=3是，根据上面案例可以知道，当使用flex=n进行分配时，它们的flex-basis为0%（即为初始项目长度为0），所以剩余空间的尺寸是600px-100px=500px，500px分为5份，绿色区域2份，蓝色区域3份，最后它们的宽度分别为粉色100px，绿色200px，蓝色300px。
当使用flex-grow=n来进行分配时，粉色的宽度为100px，绿色flexgrow=2，蓝色flex-grow=3。根据没有设置flex-basis的值时候，默认值为auto，也就是项目初始空间是项目内容的长度。所有剩余空间的尺寸为
600px-100px-50px-50px=400px；400px分为5份，绿色2份（即为160px），蓝色3份（240px），所以最后分配后粉色为100px，绿色为160px+50px=210px，蓝色为240px+50px=290px。
所以总结一下flex-grow的效果并不是将整个宽度进行等比例的分配，而是对去除内容的宽度进行了比例划分。如果想要达到我们实际所想按比例分配的效果，我们就需要使用flex=n属性来实现比较好