Flex Direction

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

In CSS steuert die flex-direction-Eigenschaft die Richtung, in der Elemente angeordnet werden, innerhalb eines Flex-Containers. Sie entscheidet, 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 Reihe von links nach rechts angeordnet. Die Hauptachse ist horizontal und die Querachse ist vertikal.

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

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

column-reverse: Flex-Elemente werden in einer Spalte angeordnet, von unten nach oben. 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 wird das .container-row-Element seine Flex-Elemente in einer Reihe von links nach rechts anzeigen, das .container-row-reverse-Element wird sie von rechts nach links anzeigen.

Aufgabe

Einfach

Sie erhalten 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 mit display: flex; als Flex-Container festgelegt. Ihre Aufgabe ist es, die Eigenschaft flex-direction zu verwenden, um die Anordnung der Flex-Elemente zu ändern.

Befolgen Sie die folgenden Schritte:

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

Spickzettel

Die Eigenschaft flex-direction steuert die Richtung, in der Elemente innerhalb eines Flex-Containers angeordnet werden:

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

Werte:

row: Standard. Elemente werden von links nach rechts platziert (horizontale Hauptachse)
row-reverse: Elemente werden von rechts nach links platziert (horizontale Hauptachse)
column: Elemente werden von oben nach unten platziert (vertikale Hauptachse)
column-reverse: Elemente werden von unten nach oben platziert (vertikale Hauptachse)

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

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

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>