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

84次阅读

共计 939 个字符，预计需要花费 3 分钟才能阅读完成。

之前有个共事布局时十分喜爱用 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’ 两个子元素的高度吗？
如果你还不晓得怎么计算，看我这篇文章你就会了。

.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

.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