Flex-Richtung

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

In CSS steuert die Eigenschaft flex-direction die Richtung, in der Elemente innerhalb eines Flex-Containers angeordnet werden. Sie bestimmt, ob die Elemente in einer Zeile oder einer Spalte angeordnet werden.

Dies wirkt sich auch darauf aus, wie Eigenschaften wie justify-content und align-items funktionieren. Die korrekte Verwendung von flex-direction hilft beim Erstellen flexibler und responsiver Layouts.

Hier ist die grundlegende Syntax für die Verwendung der Eigenschaft flex-direction:

.container {
    display: flex;
    flex-direction: value;
}

value: Die gewünschte Richtung für die Flex-Elemente, die eine der folgenden sein kann:

row: Dies ist der Standardwert. Flex-Elemente werden in einer Zeile von links nach rechts angeordnet. Die Hauptachse verläuft horizontal und die Querachse vertikal.

row-reverse: Flex-Elemente werden in einer Zeile von rechts nach links angeordnet. Die Hauptachse verläuft horizontal und die Querachse vertikal.

column: Flex-Elemente werden in einer Spalte von oben nach unten angeordnet. Die Hauptachse verläuft vertikal, die Querachse horizontal.

column-reverse: Flex-Elemente werden in einer Spalte von unten nach oben angeordnet. Die Hauptachse ist vertikal und die Querachse horizontal.

Zum Beispiel:

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

In diesem Beispiel zeigt das Element .container-row seine Flex-Elemente in einer Zeile von links nach rechts an, das Element .container-row-reverse zeigt sie von rechts nach links an.

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit zwei übergeordneten <div>-Elementen gegeben, die jeweils drei untergeordnete <div>-Elemente enthalten. Die übergeordneten <div>-Elemente wurden bereits mit display: flex; als Flex-Container festgelegt. Deine Aufgabe ist es, die Anordnung der Flex-Elemente mithilfe der Eigenschaft flex-direction zu ändern.

Führe die folgenden Schritte aus:

Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse container1 abzielt.
- Setze die Eigenschaft flex-direction auf column, um die Flex-Elemente in einer vertikalen Spalte anzuordnen.
Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse container2 abzielt.
- Setze die Eigenschaft flex-direction auf column-reverse, um die Flex-Elemente in einer umgekehrten Spalte anzuordnen.

Probier es selbst

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>