为什么第一个 div 中的 flex-grow 会影响第三个 div？

Question

我对 flex-grow 属性的理解是元素扩展到 space 而这个 space 是由 [=44] 的值决定的=].

所以如果我们有一个有 3 个子 div 的 flex 容器，第一个有 flex-grow: 1，第二个有 flex-grow:2，第三个有 flex-grow: 3，现在我们有 6 件，所以第三件将占 space.

的 50%

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

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

当我将 flex-grow: 5 添加到第一个 div 时，我预计它将占用父容器的大部分 space 但当我发现第三个时我感到困惑是扩展的那个。

那么为什么第一个没有扩展而第三个扩展了呢？

Answer 1

fiddle 中的 "first" div 是使用 "nth-last-of-type" 而不是 "nth-of-type" 选择的，因此样式将应用于最后一个 div 代替。

为什么第一个 div 中的 flex-grow 会影响第三个 div？

Why flex-grow in the first div affects the third div?

css

flexbox

flex-grow