Wyzwanie Flexbox

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 49 z 76.

Wyzwanie

Łatwy

Skoro opanowałeś już podstawy Flexboxa, w tym display: flex;, flex-direction, justify-content i align-items, czas sprawdzić swoją wiedzę w kompleksowym wyzwaniu. Pomoże Ci ono utrwalić wiedzę o tym, jak używać tych właściwości razem, aby tworzyć elastyczne i responsywne układy. Wykorzystasz to, czego nauczyłeś się o każdej właściwości, aby odtworzyć konkretny projekt.

Otrzymujesz dokument HTML z elementem nadrzędnym (<div>), który zawiera cztery elementy podrzędne (<div>). Twoim zadaniem jest użycie poznanych właściwości Flexboxa do ostylowania tych elementów tak, aby pasowały do projektu pokazanego na poniższym obrazku:

Wykonaj poniższe kroki:

Napisz regułę CSS, która wybierze element <div> z klasą container.
Ustaw właściwość display elementu .container na flex, aby przekształcić go w kontener flex.
Ustaw właściwość flex-direction elementu .container na row-reverse, aby ułożyć elementy flex w wierszu od prawej do lewej.
Ustaw właściwość justify-content elementu .container na space-between, aby równomiernie rozmieścić elementy flex, pozostawiając między nimi odstępy.
Ustaw właściwość align-items elementu .container na flex-end, aby wyrównać elementy flex do końca osi poprzecznej.
Napisz reguły CSS, aby ostylować poszczególne elementy flex (item1, item2, item3, item4) za pomocą różnych kolorów tła i rozmiarów (ustawiając różne wartości paddingu), tak jak pokazano na obrazku.

Spróbuj swoich sił

<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>