Алгоритмы расчета flex-grow и flex-shrink

flex-grow.md

Расчёт итогового размера с flex-grow

1 шаг. Рассчитываем свободное место во флекс-контейнере:

Свободное место = Ширина контейнера - Сумма базовых размеров элементов

2 шаг. Считаем размер минимальной доли свободного места:

Доля свободного места = Свободное место / Сумма flex-grow всех элементов

3 шаг. Базовый размер каждого флекс-элемента увеличиваем на размер минимальной доли свободного места умноженной на значение flex-grow этого элемента:

Итоговый размер = Базовый размер + (Доля свободного места * flex-grow)

Для верхнего блока с енотами хочется задать коэффициенты 1 и 2. Но нужные размеры блоков получаются с коэффициентами 1 и 3. Давайте посчитаем:

Свободное место = 300px - (50px * 2) = 200px
Доля свободного места = 200px / (1 + 3) = 50px
Итоговый размер зелёного енота = 50px + (50px * 1) = 100px
Итоговый размер коричневого енота = 50px + (50px * 3) = 200px

Но если задать флекс-элементам нулевой базовый размер, свободное место будет занимать всю ширину флекс-контейнера, и коэффициенты жадности будут другими.

Использовать flex-basis: 0 и flex-grow для точного управления относительными размерами не стоит. Лучше использовать базовый размер в процентах.

Тонкость. На размер оставшегося свободного места влияет не только flex-basis, но и рамки, и отступы. Если flex-basis явно задано нулевое значение, то min-width на размер свободного места влиять не будет, так как ограничения размеров к флекс-элементам применяются уже после перераспределения свободного места.

flex-shrink.md

Расчёт итогового размера с flex-shrink

Ниже описан механизм расчёта размеров элементов, когда места в контейнере не хватает:

1 шаг. Рассчитываем отрицательное пространство (ОП) во флекс-контейнере:

ОП = Ширина контейнера - Сумма базовых размеров элементов

2 шаг. Находим сумму произведений базовых размеров (СПБР) элементов на их коэффициенты сжатия:

СПБР = (Базовый размер1 * flex-shrink1) + (Базовый размер2 * flex-shrink2) + … + (Базовый размерn * flex-shrinkn)

3 шаг. Для каждого элемента считаем «нормированный коэффициент сжатия» (НКС), для чего произведение базового размера элемента на его коэффициент сжатия делим на СПБР:

4 шаг. Базовый размер элемента уменьшаем на часть ОП пропорциональную НКС элемента:

Итоговый размер = Базовый размер - (НКС * ОП)

Получается, что доля отрицательного пространства, которую «впитает» элемент, зависит от двух факторов:

• соотношения коэффициента сжатия элемента с коэффициентами других элементов,
• соотношения базового размера элемента с базовыми размерами других элементов.