Почему flex-grow в первом div влияет на третий div? - PullRequest
0 голосов
/ 24 января 2019

Мое понимание свойства flex-grow состоит в том, что элементы расширяются, чтобы занять пространство, и это занимаемое пространство определяется значением этого свойства.

Таким образом, если у нас есть гибкий контейнер, который имеет 3 дочерних элемента, первый из них имеет flex-grow: 1, второй flex-grow:2, третий - flex-grow: 3, теперь у нас есть 6 частей, поэтому третий займет 50% пространство.

Почему добавление значения 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/

Когда я добавил flex-grow: 5 к первому div, я ожидал, что он займет большую часть пространства родительского контейнера, но я был озадачен, когда обнаружил, что третий был расширенным.

Так почему первый не расширился, а третий -?

1 Ответ

0 голосов
/ 24 января 2019

«Первый» div в скрипте выбирается с использованием «nth-last-of-type», а не «nth-of-type», поэтому вместо этого применяются стили к последнему div.

...