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

flex-grow и flex-shrink определят как елементите се адаптират гъвкаво в рамките на flex контейнера, съответно когато има свободно място или недостатъчно такова.

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

.item {
  flex-grow: 1; /* Елементът ще използва цялото налично свободно пространство */
}

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

.item {
  flex-shrink: 0; /* Елементът няма да се свие */
}

Заедно с flex-basis те формират съкратеното свойство flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Пример за използване:

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

.container {
  display: flex;
  width: 400px; /* Пример за фиксирана ширина на контейнера */
}

.item {
  flex-basis: 100px; /* Основен размер на всички елементи */
}

.item-1 {
  flex-grow: 1; /* Item 1 ще използва свободното пространство */
}

.item-2 {
  flex-shrink: 0; /* Item 2 няма да се свие */
}

Ако контейнерът е по-широк от 200px (100px + 100px), item-1 ще заеме цялото оставащо свободно пространство. Ако вече е 200px, item-2 ще запази основния си размер 100px, а item-1 ще се свие.