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 angeordnet werden innerhalb eines Flex-Containers. Sie legt fest, ob die Elemente in einer Zeile oder einer Spalte platziert werden.

Dies beeinflusst auch, wie Eigenschaften wie justify-content und align-items funktionieren. Die korrekte Verwendung von flex-direction hilft dabei, flexible und responsive Layouts zu erstellen.

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

.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 ist horizontal und die Querachse ist vertikal.

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

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

column-reverse: Flex-Elemente werden in einer Spalte von unten nach oben angeordnet. Die Hauptachse ist vertikal und die Querachse ist 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

Du erhältst ein HTML-Dokument mit zwei übergeordneten <strong><div></strong>-Elementen, die jeweils drei untergeordnete <strong><div></strong>-Elemente enthalten. Die übergeordneten <div>-Elemente wurden bereits mithilfe von display: flex; als Flex-Container festgelegt. Deine Aufgabe besteht darin, die Eigenschaft flex-direction zu verwenden, um die Anordnung der Flex-Elemente 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>