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