- Теория
- Теория
Испытание: кубизм
Итак, пришла пора проверить знания.
В этом испытании вам предстоит расположить блоки на палитре в нужном порядке. Задача — подобрать размеры элементов и их внешние отступы.
Обратите внимание, что HTML-код изменять нельзя, и в этом коде заблокированы свойства для выравнивания флекс-элементов. Поэтому выравнивать придётся по-другому.
Подсказка: размеры и неавтоматические отступы кратны 5
.
Решение
Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.
.palette div {
min-width: 35px;
min-height: 35px;
}
.palette {
display: flex;
}
.palette div {
margin: auto 5px;
}
.palette .color-olive {
margin-left: auto;
height: 150px;
}
.palette .color-yellow {
margin-bottom: 5px;
height: 100px;
}
.palette .color-fuchsia {
flex-basis: 25px;
margin-top: 5px;
margin-left: auto;
height: 100px;
}
.palette .color-aqua {
flex-basis: 50px;
margin-right: auto;
height: 150px;
}
Хотите применять объектно-ориентированный подход и современные возможности ECMAScript для разработки веб-приложений? Хотите уметь применяеть паттерны проектирования? Записывайтесь на профессиональный курс «JavaScript. Архитектура клиентских приложений». Цена 12 000 ₽.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.