- Теория
- Теория
Пропорциональное растягивание элементов
Если сразу у нескольких флекс-элементов значение flex-grow
больше нуля, то они будут делить свободное место между собой.
Свободное место будет добавляться флекс-элементам пропорционально значениям их «коэффициента жадности». Например, если во флекс-контейнере есть два элемента:
.element-1 { flex-grow: 1; }
.element-2 { flex-grow: 2; }
То второму элементу достанется в два раза больше свободного места, чем первому. Если изменить значения коэффициентов у этих элементов на такие:
.element-1 { flex-grow: 50; }
.element-2 { flex-grow: 100; }
То ничего не изменится, так как отношение коэффициентов не изменилось: 100 в два раза больше 50. То есть важно не само значение коэффициента, а его соотношение с коэффициентами остальных элементов.
Это задание-загадка на подбор пропорций. Вам нужно подобрать такие значения flex-grow
, чтобы итоговый размер элементов оказался таким же, как и у «линеек» снизу. Базовые размеры элементов и размеры флекс-контейнера вы узнаете из кода.
Сейчас поэкспериментируйте самостоятельно, а в следующем задании мы детально разберём алгоритм расчёта итогового размера флекс-элементов с ненулевыми flex-grow
.
Подсказка: в простейшем решении коэффициенты будут целыми числами не больше 5.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.