flex-shrink计算规则

 

flex-shrink: 代码如下

main{
  width: 600px;
  border: 1px solid #000;
  height: 100px;
  display: flex;
  box-sizing: border-box;
  
}
div{
  box-sizing: border-box;
  height: 100px;
  border-width: 1px;
  border-style: solid;
  border-color: red;
}
div:nth-child(1) {
  flex-shrink: 1;
  width: 100px;
}
div:nth-child(2) {
  flex-shrink: 3;
  width: 400px;
}
div:nth-child(3) {
  width: 500px;
  flex-shrink: 6;
}


<main>
     <div>1</div>
     <div>2</div>
     <div>3</div>
   </main>

假设三个div的宽度为：w1, w2, w3，flex-shrink为：f1, f2, f3，flex-shrink总的权重值为 T = w1 * f1 + w2 * f2 + w3 * f3 = 4300px;

需要收缩的总宽度为 A = w1 + w2 + w3 - boxWidth = 100px + 400px + 500px - 600px  =  400px;

所以第1个div的宽度为 width = w1 - w1 * f1 / T * A = 100 - 100 * 1 / 4300 * 400 = 90.698

所以第2个div的宽度为 width = w1 - w1 * f1 / T * A = 400 - 400 * 3 / 4300 * 400 = 288.37

所以第3个div的宽度为 width = w1 - w1 * f1 / T * A = 500 - 500 * 6 / 4300 * 400 = 220.93