CSS Academy · Lektion

Display Flex und Flex Direction

Aktivieren Sie Flexbox für einen Container und steuern Sie mit flex-direction die Richtung der Hauptachse.

Display Flex und Flex Direction ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Flexbox aktivieren

Flexbox wird aktiviert, indem für ein Container-Element (den Flex-Container) display: flex festgelegt wird. Seine direkten untergeordneten Elemente werden automatisch zu Flex-Elementen.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Inline-Flex

display: inline-flex erstellt einen Flex-Container, der wie inline-block im normalen Inline-Fluss statt als Block fließt. Das interne Flexbox-Verhalten ist identisch.

<p>Status: <span class="badge">🔥 Trending</span></p>

Hauptachse und Querachse

Flexbox hat zwei Achsen:

Hauptachse: die primäre Richtung, in der die Elemente angeordnet werden
Querachse: die senkrecht zur Hauptachse verlaufende Achse

Alle Flex-Eigenschaften beziehen sich auf diese Achsen, nicht auf feste Richtungen.

flex-direction: row (Standard)

Die Standardrichtung ist row: Die Elemente werden entlang der horizontalen Hauptachse von links nach rechts angeordnet.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column ordnet die Elemente vertikal untereinander an. Die Hauptachse verläuft dadurch vertikal und die Querachse horizontal.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse kehrt die horizontale Richtung um: Die Elemente werden von rechts nach links angeordnet. Der Anfang der Hauptachse liegt rechts.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse ordnet die Elemente von unten nach oben an. Das letzte Element erscheint oben.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction beeinflusst alle Flex-Eigenschaften

Wenn Sie die Flex-Richtung ändern, ändert sich auch die Richtung von justify-content. Bei der Richtung column richtet justify-content entlang der vertikalen statt der horizontalen Achse aus.

Einfache horizontale Anordnung

Der einfachste Anwendungsfall für Flexbox – Elemente in einer Navigation zentrieren:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Einfache vertikale Anordnung

Den Inhalt einer Karte vertikal und horizontal zentrieren:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

Kurzschreibweise flex-flow

flex-flow ist eine Kurzschreibweise für flex-direction und flex-wrap:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Kurzer Test

Welche Achse steuert justify-content, wenn flex-direction: column festgelegt ist?

Zusammenfassung

Setzen Sie display: flex für einen Container, um für seine untergeordneten Elemente einen Flex-Kontext zu erstellen. flex-direction legt die Richtung der Hauptachse fest: row (horizontal) oder column (vertikal). Alle Flex-Ausrichtungseigenschaften beziehen sich auf diese Achsen, nicht auf feste Richtungen wie links/rechts oder oben/unten.

Häufig gestellte Fragen

Ist die Lektion „Display Flex und Flex Direction“ kostenlos?

Ja — der vollständige Text von „Display Flex und Flex Direction“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Display Flex und Flex Direction“?

Aktivieren Sie Flexbox für einen Container und steuern Sie mit flex-direction die Richtung der Hauptachse. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Display Flex und Flex Direction“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy