如何弯曲的基础: 0%和弹性增长因子计算计算的宽度？

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;规则，计算出的宽度现在变为226.5px，用于Box 1和2，而Box 3得到411 Box。

我的父容器宽度是864 is 。因此，864 - 103.53 + (94.52 * 2)等于571.43px。所以这个空间是分布的，但是我不能做数学，它可以显示每个盒子是如何得到它的最后宽度的。

有人能帮我解释一下这个吗？

Answer 1

flex-grow属性指定了flex项的flex增长因子。它指定了项目应该占用的flex容器中的空间大小。flex项的flex增长因子是相对于flex容器中其他子的大小的。- MDN条款

正如您所看到的，大小相对于其他孩子。假设您的容器是864 or宽，则子容器的宽度为184.5 or宽，不包括填充或边框。在从总宽度中减去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。所以你有正确的想法。只是孩子的“宽度”是不包括填充物和边框宽度的宽度。

最终，您可以在下面看到这个例子。当仅使用flex子级的1,1,2宽度的"content“部分计算时，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>

​