效果：
现在我们给红色项目设置 flex 为1，可以看到红色项目的宽度填充了除去 绿色项目和黄色项目 的部分
<View style={{backgroundColor:'red', height:60, width:60, flex:1}}></View>
效果：
接着再给绿色项目也设置 flex 为1，可以看到红色项目和绿色项目填充了 除黄色项目 的部分，并且红色和绿色项目各占剩下空间的一半
<View style={{backgroundColor:'red', height:60, width:60, flex:1}}></View>
<View style={{backgroundColor:'green', height:60, width:60, flex:1}}></View>
效果：
现在我们再设置黄色项目的 flex 为2，可以看出，红色和绿色所占的空间和等同于黄色项目，并且红色和绿色平分了除黄色项目以外的空间，现在我们应该能理解上面公式的意思了吧（项目宽度 = 父项目的宽度 * （子项目自身比例 / 所有父项目内子项目的比例））
<View style={{backgroundColor:'red', height:60, width:60, flex:1}}></View>
<View style={{backgroundColor:'green', height:60, width:60, flex:1}}></View>
<View style={{backgroundColor:'yellow', height:60, width:60, flex:3}}></View>
效果：
但是不知道各位发现了没有，虽然我们每个子项目都同时设置了高度和宽度，但是却只有宽度改变，而高度则一直保持我们设置的状态，是不是 flex属性 只对宽度有效呢？接下来我们来修改下代码，看看是不是真的如我们想象的这样 ———— 这里我们将绿色的高度去掉，可以看出，绿色项目的高度填充了整个父项目的高度
<View style={{backgroundColor:'red', height:60, width:60, flex:1}}></View>
<View style={{backgroundColor:'green', width:60, flex:1}}></View>
<View style={{backgroundColor:'yellow', height:60, width:60, flex:3}}></View>
效果：
