Мое понимание свойства 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, я ожидал, что он займет большую часть пространства родительского контейнера, но я был озадачен, когда обнаружил, что третий был расширенным.
Так почему первый не расширился, а третий -?