- Теория
 - Теория
 
Расчёт итогового размера с 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 на размер свободного места влиять не будет, так как ограничения размеров к флекс-элементам применяются уже после перераспределения свободного места.
- index.html
 
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.