Флексбокс, часть 2 / Испытание: мастер коэффициентов [14/28]

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

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

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

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

×

Испытание: мастер коэффициентов [14/28]

По многочисленным просьбам фанатов заданий на подбор коэффициентов мы создали это испытание, в котором вы снова сможете насладиться математикой и подсчётом дробей.

В заблокированном HTML-коде заданы базовые размеры блоков, которые вам изменять нельзя. Но отталкиваясь от этих размеров, вы можете понять, в каком блоке использовать коэффициенты растяжения, а в каком — коэффициенты сжатия. И, конечно, подобрать значения коэффициентов.

Подсказка: итоговые размеры блоков кратны 50, а коэффициенты — небольшие целые числа.


Выполнить задание
<!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"> <link href="exam-2.css" rel="stylesheet"> <style> .brick-layout { display: flex !important; } .brick-1, .brick-2, .brick-3 { flex-basis: 25px !important; } .brick-4 { flex-basis: 200px !important; } .brick-5 { flex-basis: 400px !important; } .brick-6 { flex-basis: 200px !important; } </style> </head> <body class="exam"> <div class="brick-layout"> <div class="brick brick-1 color-aqua"></div> <div class="brick brick-2 color-olive"></div> <div class="brick brick-3 color-yellow"></div> </div> <div class="brick-layout"> <div class="brick brick-4 color-yellow"></div> <div class="brick brick-5 color-olive"></div> <div class="brick brick-6 color-aqua"></div> </div> </body> </html>
.brick-layout { display: flex; width: 300px; padding: 5px; box-sizing: content-box; } .brick { min-width: 0; height: 100px; } .brick-1, .brick-2, .brick-3 { flex-basis: 25px; } .brick-4 { flex-basis: 200px; } .brick-5 { flex-basis: 400px; } .brick-6 { flex-basis: 200px; }
<HTML Academy>
?

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

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

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

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