flex布局--flex-shrink的计算

Posted 2020-12-09 super-scarlett

 

html:

 

<div class="box">
        <div class="first">85.719</div>
        <div class="second">214.281</div>
</div>

css:

.box{
  width: 300px;
  display: flex;
}
.first{
  background: red;
  width: 100px;
  flex-shrink: 1;
}
.second{
  background: yellow;
  width: 300px;
  flex-shrink: 2;
}

结果展示：

 

计算方法：

需要收缩的空间：100+300-300=100

每个子项目需要收缩的值：100n+300*2n=100; n=1/7

first宽度：100-100*1/7=85.719

second宽度：300-300*2*1/7 = 214.281