Как функционират свойствата flex-grow и flex-shrink…

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

flex-grow:

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

flex-shrink:

Определя колко ще се свие елементът, ако наличното пространство във flex контейнера е по-малко от сумата на базовите размери на всички елементи.
По подразбиране flex-shrink: 1, което означава, че елементът може да се свие.
Стойност - неотрицателно число.
Колкото по-голяма е стойността flex-shrink, толкова по-силно ще се свие елементът в сравнение с други с по-малка стойност.
При свиване се взема предвид базовата ширина на елемента (flex-basis или width).

Пример:

.контейнер {
  display: flex;
  width: 500px;
  /* Общата ширина на контейнера */
}

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

.елемент:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Стойности по подразбиране */
}

.елемент:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Не се свива */
}

.елемент:nth-child(3) {
  flex-grow: 0; /* Не расте */
  flex-shrink: 2; /* Свива се по-силно */
}

Ако сумата на базовите ширини (300px) е по-малка от ширината на контейнера (500px), оставащото пространство (200px) ще бъде разпределено между първия и втория елемент в съотношение flex-grow 1:2.

Ако сумата на базовите ширини е по-голяма от ширината на контейнера, елементите ще се свиват съгласно стойностите flex-shrink и техните базови размери. Елементът с flex-shrink: 0 няма да се свие.

Как функционират свойствата flex-grow и flex-shrink?