Курс «Флексбокс, часть 2»

Пропорциональное растягивание элементов [8/28]

Если сразу у нескольких флекс-элементов значение 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.

Выполнить задание

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Пропорциональное растягивание элементов</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="world world-flat"> <div class="spot spot-1"> <div class="skate no-width racoon-green"></div> <div class="skate no-width racoon-brown"></div> <div class="ruler ruler-green w-100">100px</div> <div class="ruler ruler-brown w-200 l-100">200px</div> </div> <div class="spot spot-2"> <div class="skate no-width racoon-green"></div> <div class="skate no-width racoon-brown"></div> <div class="ruler ruler-green w-200">200px</div> <div class="ruler ruler-brown w-300 l-200">300px</div> </div> </body> </html>

.spot { display: flex; height: 100px; padding: 10px 0; } .spot-1 { width: 300px; } .spot-1 .skate { flex-basis: 50px; } .spot-1 .racoon-green { flex-grow: 0; } .spot-1 .racoon-brown { flex-grow: 0; } .spot-2 { width: 500px; } .spot-2 .skate { flex-basis: 100px; } .spot-2 .racoon-green { flex-grow: 0; } .spot-2 .racoon-brown { flex-grow: 0; }

HTML Academy

Задайте енотам на верхней поляне .spot-1 значения flex-grow так, чтобы их ширина стала равной ширине «линеек».
Сделайте то же самое с енотами на нижней поляне .spot-2.

В этом задании можно менять только значения flex-grow.

Теория Проверить Следующее задание

Обучение

Компания

Контакты