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

flex-grow и flex-shrink управляют тем, как flex-элементы распределяют свободное пространство внутри flex-контейнера.

flex-grow:

• Определяет, какую часть доступного свободного пространства в flex-контейнере займет элемент, если свободное пространство есть.
• По умолчанию flex-grow: 0, что означает, что элемент не увеличивается.
• Значение - неотрицательное число.
• Если у нескольких элементов flex-grow больше 0, свободное пространство распределяется между ними пропорционально их значениям flex-grow.

flex-shrink:

• Определяет, насколько элемент будет сжиматься, если доступное пространство в flex-контейнере меньше суммы базовых размеров всех flex-элементов.
• По умолчанию flex-shrink: 1, что означает, что элемент может сжиматься.
• Значение - неотрицательное число.
• Чем больше значение flex-shrink, тем сильнее элемент будет сжиматься по сравнению с другими элементами с меньшим значением.
• При сжатии учитывается базовая ширина элемента (flex-basis или width).

Пример:

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

.item {
  flex-basis: 100px;
  /* Базовая ширина каждого элемента */
}

.item:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Значения по умолчанию */
}

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

.item:nth-child(3) {
  flex-grow: 0; /* Не увеличивается */
  flex-shrink: 2; /* Сжимается сильнее */
}

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

Если сумма базовых ширин больше ширины контейнера, элементы будут сжиматься в соответствии с их значениями flex-shrink и их базовыми размерами. Элемент с flex-shrink: 0 не будет сжиматься.