flex-shrink 计算公式

133 阅读1分钟

box-shrink:(每个盒子的宽度 x box-shrink所占比例) ÷ (每个盒子的宽度 x box-shrink所占比列 相加 之和 ) × 多出来的剩余空间

以下例子:

.wrapper {
    width: 600px;
    height: 300px;
    display: flex;
}

.wrapper .content {
    width: 200px;
    height: 100px;
    box-sizing: border-box;
    flex-grow: 1;
}

.wrapper .content:last-of-type {
    width: 400px;
    flex-shrink: 4;
}
<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

我可以得出前两个div所压缩比例空间:
200*1 + 200*1 + 400*4=2000;

//计算前两个div压缩值
200*1
------- * 200= 20   压缩值20
2000

//计算最后一个div压缩值
400*4
------- * 200 =160 压缩值 160
2000