css弹性布局flex和flex-grow的区别

css3的弹性布局，使用起来非常的方便，进行比例布局时flex和flex-grow有什么区别呢？

flex比例

比如有个父元素div宽度为700，每个子元素的默认大小为100，如果给第二个和第三个元素flex比例布局，设为1:2，那么他们的实际宽度是多少呢？

<div style="width: 700px; display: flex">
  <div style="width: 100px;"></div>
  <div style="width: 100px; flex: 1"></div>
  <div style="width: 100px; flex: 2"></div>
</div>

当div元素同时设置width属性和flex属性值时，宽度大小一flex属性为准

剩余宽度 =  父元素宽度 - 未使用flex属性元素的宽度和

每一份比例值 = 剩余宽度  / flex属性值的和

flex属性元素宽度 = 每一份比例值 * flex属性值

flex-grow比例

<div style="width: 700px; display: flex">
  <div style="width: 100px;"></div>
  <div style="width: 100px; flex-grow: 1"></div>
  <div style="width: 100px; flex-grow: 2"></div>
</div>

当div元素设置width属性时，宽度会受width值的影响

剩余宽度 =  父元素宽度 - 所有元素div的宽度和

每一份比例值 = 剩余宽度 / (flex-grow属性值的和)

flex-grow属性元素宽度 = 实际宽度 + 每一份比例值 * flex-grow属性值