Flexbox-Herausforderung

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

Aufgabe

Einfach

Nachdem du die Grundlagen von Flexbox, einschließlich display: flex;, flex-direction, justify-content und align-items, beherrschst, ist es an der Zeit, dein Wissen mit einer umfassenden Herausforderung auf die Probe zu stellen. Diese Herausforderung hilft dir, dein Verständnis dafür zu festigen, wie du diese Eigenschaften gemeinsam verwendest, um flexible und responsive Layouts zu erstellen. Du wirst das Gelernte zu jeder Eigenschaft anwenden, um ein bestimmtes Design nachzubilden.

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

Führe die folgenden Schritte aus:

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

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>