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 + (94.52 * 2)等于 571.43px 。所以这个空间的数量是分布的，但是我无法进行数学计算，可以显示每个盒子的最终宽度。

任何人都可以解释这个吗？

Answer 1

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

- flex-grow MDN Article

如您所见，尺寸与其他儿童相关。鉴于您的容器宽度为864px，孩子的宽度为184.5px ，不包括填充或边框。我们通过将宽度除以总增长值除以灵活儿童的填充和边框宽度超出总宽度来得到该数字：(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。所以你有正确的想法。只是孩子们的“宽度”是不包括填充和边框宽度的宽度。

最终，您可以看到如下所示。仅使用弹性子项的box model宽度的“内容”部分进行计算时，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>

flex-basis：0％和flex-grow因子如何计算计算宽度？

1 个答案: