flex-basis：0％和flex-grow系数如何计算计算出的宽度？

Question

我在下面的html中设置了默认的flex属性。

<div class="container">
  <div class="box"> BOX 1</div>
  <div class="box"> BOX 2</div>
  <div class="box box2"> BOX 3 .</div>
</div>

和样式是：

.container {
  border: 1px solid #59c;
  width: 60vw;
  background: #ccc;
  height: 200px;
  margin: 0 auto;
  display: flex;
  padding: 30px;
}

.box {
  font-size: 18px;
  font-weight: 800;
  background: #e5f;
  border: 1px solid #99c;
  padding: 20px;
}

现在，在我的Chrome浏览器中，我确实看到方框1和方框2的计算宽度为94.52px，而box3的宽度为103.52px。 小提琴b666tkj9 。 现在，当我添加以下样式时：

.box2 {
   flex: 2 1;
}

和flex: 1 1; 按照.box {}规则，框1和2的计算宽度现在变为226.5px ，框3得到411px 。

我的父容器宽度为864px 。 因此， 864-103.53 864 - 103.53 + (94.52 * 2)等于571.43px 。 因此，然后分配了这么多的空间，但是我无法做数学运算来显示每个盒子的最终宽度。

有人可以帮忙解释一下吗？

Answer 1

flex-grow CSS属性指定弹性项目的弹性增长因子。 它指定项目应在flex容器内占用多少空间。 弹性项目的弹性增长因子是相对于弹性容器中其他子项的大小的 。

— flex-grow MDN文章

如您所见，大小是相对于其他子项的。 假设您的容器宽度为864px，则子容器的宽度将为184.5px（ 不包括padding或borders） 。 从总宽度中减去flex子代的填充和边框宽度后，我们将宽度除以总的增长值，得出该数字： (864 - 21*6) / 4 = 184.5 （ 21*6占三个余数边框，三个右边框，三个左填充值和三个右填充值）。 因此，将flex-grow设置为1,1,2 ，您分别得到184.5px,184.5px,369px 。 包括填充和边框以达到原始宽度总和： 184.5+184.5+369 + 40+40+40 + 2+2+2 = 864 。 所以你有正确的想法。 只是子代的“宽度”是不包括填充和边框宽度的宽度。

最终，您可以看到下面的说明。 1,1,2转换为184.5px,184.5px,369px当仅使用的“内容”部分计算盒模型为柔性儿童宽度：

 .container { border: 1px solid #59c; width: 864px; background: #ccc; height: 200px; margin: 0 auto; display: flex; padding: 30px; } .box { font-size: 18px; font-weight: 800; background: #e5f; border: 1px solid #99c; padding: 20px; flex: 1 1; } .box2 { flex: 2 1; } .box{position:relative} .box:after{content:'184.5px';position:absolute;left:20px;right:20px;bottom:50%;text-align:center;border-bottom:2px solid;} .box:before{content:'';position:absolute;left:20px;right:20px;bottom:50%;border:1px solid;border-width:0 2px;height:8px;margin-bottom:-3px;} .box2:after{content:'369px';} 

 <div class="container"> <div class="box"> BOX 1</div> <div class="box"> BOX 2</div> <div class="box box2"> BOX 3 .</div> </div>