之前有个共事布局时十分喜爱用flex布局，能用flex的他都用flex了，并且他在用flex布局的时候还总喜爱偏门布局，让人很难捉摸到元素的最终宽度，比方：

.box{    display: flex;    width: 600px;    height: 300px;}.box .left {    flex: 1 1 0;    background: red;}.box .right {    flex: 2 2 0;    background: blue;}

如上布局你能计算的出.left、'.right'两个子元素的高度吗？
如果你还不晓得怎么计算，看我这篇文章你就会了。

依据 flex-grow(扩张) 计算元素宽度

.box{    display: flex;    width: 600px;    height: 300px;}.box .left {    flex: 1 1 200px;    background: red;}.box .right {    flex: 2 1 300px;    background: blue;}

依据flex-grow计算元素宽度首先须要计算出：残余空间、扩张比总和
残余空间：600 - (200 + 300) = 100
扩张比总和：1 + 2 = 3
每份扩张所占宽度：100 / 3 ≈ 33.33

因而两个子元素的宽度为：
.left：300 + (1 * 33.33) = 333.33
.right：200 + (2 * 33.33) = 266.67

依据 flex-shrink(膨胀) 计算元素宽度

.box{    display: flex;    width: 600px;    height: 300px;}.box .left {    flex: 1 2 500px;    background: red;}.box .right {    flex: 1 1 400px;    background: blue;}

看下面的代码很显著两个子元素的宽度超过了父元素的宽度，那么两个子元素会怎么膨胀呢？
依据flex-shrink计算元素宽度首先须要计算出：总溢出宽度、总权重
总溢出宽度：500+400 - 600 = 300
总权重：(2 * 500) + (1 * 400) = 1400
两个元素别离膨胀：
left: 300 * (2 * 500) / 1400= 214.28
right: 300 * (1 * 400) / 1400= 85.72
所以两个元素宽度为：
.left： 500 - 214.28 = 285.72
.right： 400 - 85.72 = 314.28