Flex Box: Испытание

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 49 из 76.

Задание

Легко

Теперь, когда вы освоили основы Flexbox, включая display: flex;, flex-direction, justify-content и align-items, пришло время проверить ваши знания в комплексном испытании. Это задание поможет вам закрепить понимание того, как использовать эти свойства вместе для создания гибких и адаптивных макетов. Вы примените все, что узнали о каждом свойстве, чтобы воссоздать определенный дизайн.

Вам дан HTML-документ с родительским блоком (<div>), который содержит четыре дочерних блока (<div>). Ваша задача — использовать изученные свойства Flexbox для стилизации этих элементов в соответствии с дизайном, показанным на изображении ниже:

Выполните следующие шаги:

Напишите CSS-правило для элемента <div> с классом container.
Установите свойство display элемента .container в значение flex, чтобы превратить его во flex-контейнер.
Установите свойство flex-direction элемента .container в значение row-reverse, чтобы расположить flex-элементы в ряд справа налево.
Установите свойство justify-content элемента .container в значение space-between, чтобы равномерно распределить flex-элементы со свободным пространством между ними.
Установите свойство align-items элемента .container в значение flex-end, чтобы выровнять flex-элементы по концу поперечной оси.
Напишите CSS-правила для стилизации отдельных flex-элементов (item1, item2, item3, item4) с различными фоновыми цветами и размерами (используя разные внутренние отступы padding), как показано на изображении.

Попробуйте сами

<html>
<head>
    <title>Flex Box Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
        <div class="item4">Item 4</div>
    </div>
</body>
</html>