flex grow 不能像描述的那样工作

Question

我对 flex grow 的理解有点困惑根据与其兄弟姐妹相关的部分确定 child 的大小，我将一个元素设置为 flex-grow 两个但它很清楚远不止两个。能否指导我获得有关 flex grow 的准确信息或对其进行解释，谢谢。

  .parent{
      display: flex;
      border: 1px solid rgba(0,0,0,.5);
      height: 300px;
      width: 300px;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      //align-content: center;
    }
  .parent div{
      width: 50px;
      height: 50px;
      background-color: blue;
      margin:1px;
      color: white;
      text-align: center;
      line-height: 50px;
    }

  .d2{
      flex-grow: 3;
      }

Answer 1

您需要将 flex-grow:1; 添加到 .d1 。因为 flex-grow 决定了剩余的 space 如何在弹性项目之间分配以及每个项目接收多少。

因此，如果您不为某些项目设置 flex-grow，它们将不会获得 space，并且您将不会获得您期望的元素宽度。

.d1{
  flex-grow: 1;
}

.parent {
  display: flex;
  border: 1px solid rgba(0, 0, 0, .5);
  height: 300px;
  width: 300px;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;

}

.parent div {
  width: 50px;
  height: 50px;
  background-color: blue;
  margin: 1px;
  color: white;
  text-align: center;
  line-height: 50px;
}

.d1 {
  flex-grow: 1;
}

.d2 {
  flex-grow: 3;
}

<div class="parent">
  <div class="d1">1</div>
  <div class="d2">2</div>

</div>

flex grow 不能像描述的那样工作

flex grow not working as described

css

flexbox

flex-grow