flex grow 不像描述的那样工作[重复]答案

【问题标题】：flex grow not working as described [duplicate]flex grow 不像描述的那样工作[重复]
【发布时间】：2017-10-31 01:48:10
【问题描述】：

从我的理解中我有点困惑 flex grow 根据与其兄弟姐妹相关的部分来确定孩子的大小，我将一个元素设置为 flex-grow 两个，但它显然远不止两个。能否指导我了解有关 flex 增长的准确信息或解释它，谢谢。

https://jsfiddle.net/onnakjen/75/

  .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;
      }

【问题讨论】：

您的最终目标到底是什么？你希望.d1 是 50px，你希望 .d2 是 .d1 的两倍？或者您只是希望 .d2 是 .d1 的两倍，并且您希望它们都填充容器的宽度？
css-tricks.com/snippets/css/a-guide-to-flexbox/… - 在您的示例中，flex-grow 的默认值为 0，因此将 d2 设置为 3 并将 d1 设置为 0 意味着 d2 会将所有剩余空间设为 0 / 3 = infinate跨度>

标签： css flexbox flex-grow

【解决方案1】：

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

因此，如果您不为某些项目设置 flex-grow，它们将无法获得该空间，并且您将无法获得预期的元素宽度。

.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>

【讨论】：