记一次 flex-shrink的宽度计算方式

277 阅读1分钟

对于如下代码,.box1 、.box2、.box3,真实宽度正确的是

  <div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </div>
  <style>
    .container {
      display: flex;
      width: 200px;
      height: 100px;
    }
    .box1 {
      width: 100px;
      flex-shrink: 2;
      background: red;
    }
    .box2 {
      width: 50px;
      flex-shrink: 2;
      background: blue;
    }
    .box3 {
      width: 100px;
      flex-shrink: 1;
      background: pink;
    }
  </style>

计算方式:

父级宽200 子项目宽度为100+50+100=250

溢出:50

首先计算加上权重的值:200+100+100=400

100 * 2/400 * 50 =25 50 * 2/400 * 50 =12.5 100 * 1/400 * 50= 12.5

.box1 75px 、 .box2 37.5px、 .box3 87.5px