Как работают свойства 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 будет сжиматься.