话不多说，直接上代码

<-- html -->
<div id="content">
    <div class="low">1</div>
    <div class="high">2</div>
    <div class="low">3</div>
</div>

Part1当我们只为父元素设置flex时

#content {
  display: flex;
  border: 4px solid #efefef;
  background-color: #ccc;
}
#content div.low {
  width: 100px;
  margin: 10px;
  background-color: yellow;
}

.high {
  background-color: yellow;
}

得出结论1：父元素只设置display为flex时候，子元素相当于inline-block元素。可以设置width，但是不存在换行。请同学们认真读两遍。

Part2当我们同时为子元素设置flex等于数值时

#content {
  display: flex;
  border: 4px solid #efefef;
  background-color: #ccc;
}

#content div.low {
  flex: 1;
  width: 100px;
  margin: 10px;
  background-color: yellow;
}

.high {
  flex: 2;
  background-color: yellow;
}

得出结论2：子元素同时设置flex等于数值时。子元素本身整体宽度占自己拥有的比例宽度，元素所占空间不受width的影响。请同学们认真读三遍。

Part3当我们为父元素设置flex-grow时

#content {
    display: flex;
    border: 4px solid #efefef;
    background-color: #ccc;
}

#content div.low {
    flex-grow: 1;
    width: 100px;
    margin: 10px;
    background-color: yellow;
}

.high {
    flex-grow: 2;
    background-color: yellow;
}

在这里我们总结为 flex-grow 属性决定了子容器要占用父容器多少剩余空间。 计算方式如下：

剩余空间：x
假设有三个flex item元素，flex-grow 的值分别为a, b, c
每个元素可以分配的剩余空间为：
a/(a+b+c) * x，b/(a+b+c) * x，c/(a+b+c) * x

以 div.low 为例子进行说明： div 占比剩余空间：1/(1+2+1) = 1/4，
那么 div “瓜分”到的 剩余宽度*1/4，实际宽度为100+剩余宽度*1/4。

得出结论3:如果item设置了宽度，那多出来的空间，子元素在本身设置的宽度基础上加上按比例平分的宽度。前提是在子元素设置宽度一共不大于当前父元素的宽度时。同理，当子元素设置宽度一共大于当前父元素的宽带时，也会按同样的比例缩小宽度。