Question

我对我的理解感到有点困惑，flex grow会根据与兄弟姐妹相关的部分确定孩子的体型，我是一个灵活成长的元素，但是它远远超过两个。有些人可以指导我获得有关flex增长的准确信息或解释它，谢谢。

  .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 确定如何在弹性项目之间划分剩余空间以及每个项目接收的数量。

所以，如果你没有为某些物品设置flex-grow，他们就不会得到那个空间，你就不会得到元素＆＃39;宽度如你所料。

.d1{
  flex-grow: 1;
}

＆＃13;

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

＆＃13;

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

＆＃13;

flex变得不像所描述的那样工作

1 个答案: