Flexbox-Herausforderung

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 49 von 76.

Aufgabe

Einfach

Nachdem Sie die Grundlagen von Flexbox beherrscht haben, einschließlich display: flex;, flex-direction, justify-content und align-items, ist es an der Zeit, Ihr Wissen mit einer umfassenden Herausforderung auf die Probe zu stellen. Diese Herausforderung wird Ihnen helfen, Ihr Verständnis dafür zu festigen, wie Sie diese Eigenschaften zusammen verwenden, um flexible und responsive Layouts zu erstellen. Sie werden das Gelernte über jede Eigenschaft anwenden, um ein bestimmtes Design nachzubauen.

Ihnen wird ein HTML-Dokument mit einem übergeordneten Bereich (<div>) gegeben, der vier untergeordnete Bereiche (<div>) enthält. Ihre Aufgabe ist es, die gelernten Flexbox-Eigenschaften zu verwenden, um diese Elemente so zu gestalten, dass sie dem im Bild unten gezeigten Design entsprechen:

Folgen Sie den unten stehenden Schritten:

Schreiben Sie eine CSS-Regel, die auf das <div>-Element mit der Klasse container abzielt.
Setzen Sie die Eigenschaft display des .container-Elements auf flex, um es in einen Flex-Container zu verwandeln.
Setzen Sie die Eigenschaft flex-direction des .container-Elements auf row-reverse, um die Flex-Elemente in einer Reihe von rechts nach links anzuordnen.
Setzen Sie die Eigenschaft justify-content des .container-Elements auf space-between, um die Flex-Elemente gleichmäßig mit Abständen dazwischen zu verteilen.
Setzen Sie die Eigenschaft align-items des .container-Elements auf flex-end, um die Flex-Elemente am Ende der Querachse auszurichten.
Schreiben Sie CSS-Regeln, um die einzelnen Flex-Elemente (item1, item2, item3, item4) mit verschiedenen Hintergrundfarben und Größen (unter Verwendung verschiedener Paddings) zu gestalten, wie im Bild gezeigt.

Probier es selbst

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