Флексбокс, часть 2 / Испытание: гибкий поток [28/28]

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения.

Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью

ВК ВКонтакте или FB Facebook

×

Испытание: гибкий поток [28/28]

Теперь вы знаете достаточно, чтобы пройти финальное испытание.

В нём снова нужно создать гибкую раскладку, но на этот раз задача усложнилась. Теперь блоков стало больше, они расположены не в один ряд и у них разные размеры.

Вам понадобится подобрать базовые размеры, отступы, некоторые коэффициенты и пару других флексовых свойств.

Подсказка: как всегда отступы и базовые размеры (до перераспределения свободного места) кратны 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="exam"> <div class="brick-layout"> <div class="brick color-aqua"></div> <div class="brick color-aqua"></div> <div class="brick color-aqua"></div> <div class="brick color-yellow"></div> <div class="brick color-yellow"></div> <div class="brick color-yellow"></div> <div class="brick color-fuchsia"></div> <div class="brick color-fuchsia"></div> </div> </body> </html>
.brick-layout { width: 400px; padding: 5px; box-sizing: content-box; } .brick { min-height: 80px; min-width: 50px; }
<HTML Academy>
?

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.