Question

我对flex-grow属性的理解是元素扩展以占用空间，而该占用的空间由该属性的值确定。

因此，如果我们有一个具有3个子div的flex容器，则第一个具有flex-grow: 1，第二个flex-grow:2，第三个具有flex-grow: 3，现在我们有6个，所以三分之一将占用50％的空间。

为什么在第一个div中添加flex-grow值会影响第三个div？

.cont {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 700px;
  padding: 10px;
}

.cont>div {
  margin: 10px;
  background: lightgreen;
  border: 1px solid black;
  flex: 0 0 300px;
}

.cont>div:nth-last-of-type(1) {
  flex-grow: 5;
}

.cont>div:nth-of-type(2) {
  flex-grow: 1;
}

.cont>div:nth-of-type(3) {
  /* flex-grow:1; */
}

<div class="cont">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

https://jsfiddle.net/u4e2psh3/

当我在第一个div中添加flex-grow: 5时，我期望它将占用父容器的大部分空间，但是当我发现第三个div是扩展的容器时，我感到困惑。

那为什么第一个不扩展而第三个不扩展？

Answer 1

小提琴中的“第一个” div是使用“ nth-last-of-type”而不是“ nth-of-type”选择的，因此样式将应用于最后一个div。

为什么第一格的弹性增长会影响第三格？

1 个答案: