box-shrink:(每个盒子的宽度 x box-shrink所占比例) ÷ (每个盒子的宽度 x box-shrink所占比列 相加 之和 ) × 多出来的剩余空间
以下例子:
.wrapper {
600px;
height: 300px;
display: flex;
}
.wrapper .content {
200px;
height: 100px;
box-sizing: border-box;
flex-grow: 1;
}
.wrapper .content:last-of-type {
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
得出:
第一个div和第二个div的宽度为180
低三个div为宽度为 400-160=240
```1.