Как работят свойствата flex-grow и flex-shrink…

flex-grow определя как силно елементът може да се увеличава при наличието на свободно пространство в контейнера. Стойността 0 (по подразбиране) означава, че елементът няма да се увеличава. Положителните стойности показват коефициента на растеж спрямо другите flex елементи в същия ред.

flex-shrink определя колко силно елементът може да се свие при недостиг на свободно пространство в контейнера. Стойността 1 (по подразбиране) означава, че може да се свие. Стойността 0 забранява свиване. Положителните стойности показват коефициента на свиване спрямо другите flex елементи.

Пример:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* Ширината на контейнера */
}

.item {
  flex-basis: 100px; /* Базовият размер на всеки елемент */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Ще заема 1 дял от свободното пространство */
  flex-shrink: 0; /* Няма да се свива */
}

.item-2 {
  flex-grow: 2; /* Ще заема 2 дяла от свободното пространство */
  flex-shrink: 1; /* Може да се свие */
}

.item-3 {
  flex-grow: 1; /* Ще заема 1 дял от свободното пространство */
  flex-shrink: 1; /* Може да се свие */
}

В този случай общият базов размер на елементите е 300px (3 * 100px). Свободното пространство е 100px (400px - 300px). Това свободно пространство ще бъде разпределено между елементите 1, 2 и 3 в съотношение на техния flex-grow: 1 + 2 + 1 = 4. Елемент 1 ще получи 1/4 * 100px = 25px допълнително пространство. Елемент 2 ще получи 2/4 * 100px = 50px допълнително пространство. Елемент 3 ще получи 1/4 * 100px = 25px допълнително пространство.

Техните крайни размери ще бъдат: Елемент 1: 100px + 25px = 125px Елемент 2: 100px + 50px = 150px Елемент 3: 100px + 25px = 125px

Ако ширината на контейнера е недостатъчна (например 200px), ще трябва да се извърши свиване. При недостиг на пространство за свиване се вземат предвид flex-shrink и текущият размер на елементите. Недостигът на пространство се разпределя за свиване между елементите с flex-shrink по-голямо от 0, пропорционално на техния flex-shrink и текущия им размер (след вземане предвид flex-basis). Алгоритъмът за свиване е по-сложен, но основната идея е, че елементите с по-голям flex-shrink или по-голям текущ размер ще се свиват по-силно.

Важно е да се помни, че flex-basis, flex-grow и flex-shrink често се използват заедно като съкратено свойство flex. Например, flex: 1 1 auto; е еквивалентно на flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Приоритет при разпределението на пространството:

flex-basis: задава началния размер на елемента.
flex-grow: разпределя положителното свободно пространство.
flex-shrink: разпределя отрицателното свободно пространство (нужда от свиване).

Как работят свойствата flex-grow и flex-shrink?