Flex布局中子元素的最终宽度计算

之前有个同事布局时非常喜欢用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