Как работают свойства 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;.

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

1. flex-basis: Устанавливает начальный размер элемента.
2. flex-grow: Распределяет положительное свободное пространство.
3. flex-shrink: Распределяет отрицательное свободное пространство (необходимость сжатия).