Kostenlose Tutorials für Anfänger

Appearance

Kapitel 5: Hauptachsen-Richtung und Umbruch (flex-direction + flex-wrap) ​

5.1 flex-direction: Hauptachsen-Richtung festlegen ​

Definition:flex-direction bestimmt die Richtung der Hauptachse (Main Axis) und damit, wie Flex-Elemente im Container angeordnet werden.

Die 4 häufigsten Werte ​

1. row (Standardwert)

css
.container {
  display: flex;
  flex-direction: row;  /* Standard: horizontal von links nach rechts */
}

Visualisierung:

►────── Hauptachse (row) ──────►
┌─────────────────────────────────┐
│  [Element 1]  [Element 2]  [Element 3]  │
└─────────────────────────────────┘

2. row-reverse

css
.container {
  display: flex;
  flex-direction: row-reverse;  /* Horizontal von rechts nach links */
}

Visualisierung:

◄────── Hauptachse (row-reverse) ──────◄
┌─────────────────────────────────┐
│  [Element 3]  [Element 2]  [Element 1]  │
└─────────────────────────────────┘

3. column

css
.container {
  display: flex;
  flex-direction: column;  /* Vertikal von oben nach unten */
}

Visualisierung:

▼
│
│  [Element 1]
│
│  [Element 2]
│
│  [Element 3]
│
▼
Hauptachse (column)

4. column-reverse

css
.container {
  display: flex;
  flex-direction: column-reverse;  /* Vertikal von unten nach oben */
}

Visualisierung:

▼
│
│  [Element 3]
│
│  [Element 2]
│
│  [Element 1]
│
▼
Hauptachse (column-reverse)

Praxisbeispiel: Navigation ​

HTML:

html
<nav class="navbar">
  <a href="#" class="nav-link">Home</a>
  <a href="#" class="nav-link">Über uns</a>
  <a href="#" class="nav-link">Kontakt</a>
</nav>

CSS (Standard - row):

css
.navbar {
  display: flex;
  flex-direction: row;  /* Links nach rechts */
  background-color: #333;
  padding: 20px;
  gap: 20px;
}

.nav-link {
  color: white;
  text-decoration: none;
}

Ergebnis:

┌──────────────────────────┐
│ Home  Über uns  Kontakt  │
└──────────────────────────┘

CSS (column - für Mobile):

css
.navbar {
  display: flex;
  flex-direction: column;  /* Untereinander für Mobile */
  background-color: #333;
  padding: 20px;
  gap: 10px;
}

Ergebnis:

┌────────────┐
│   Home    │
│ Über uns  │
│ Kontakt   │
└────────────┘

5.2 flex-wrap: Umbruch steuern ​

Definition:flex-wrap bestimmt, ob Flex-Elemente in eine neue Zeile umbrechen dürfen, wenn sie nicht mehr in den Container passen.

Die 3 Werte ​

1. nowrap (Standardwert)

css
.container {
  display: flex;
  flex-wrap: nowrap;  /* KEIN Umbruch - Elemente werden schmaler */
}

Verhalten:

  • Elemente bleiben in einer Zeile
  • Elemente schrumpfen automatisch, um in den Container zu passen
  • Kann zu sehr schmalen Elementen führen

2. wrap

css
.container {
  display: flex;
  flex-wrap: wrap;  /* Umbruch erlauben */
}

Verhalten:

  • Wenn Elemente nicht mehr in eine Zeile passen, brechen sie in eine neue Zeile um
  • Elemente behalten ihre ursprüngliche Breite (wenn möglich)
  • Sehr nützlich für responsive Layouts

3. wrap-reverse

css
.container {
  display: flex;
  flex-wrap: wrap-reverse;  /* Umbruch in umgekehrter Reihenfolge */
}

Verhalten:

  • Wie wrap, aber neue Zeilen werden nach oben hinzugefügt (statt nach unten)

Praxisbeispiel: Karten-Layout ​

HTML:

html
<div class="card-container">
  <div class="card">Karte 1</div>
  <div class="card">Karte 2</div>
  <div class="card">Karte 3</div>
  <div class="card">Karte 4</div>
  <div class="card">Karte 5</div>
</div>

CSS (nowrap - NICHT empfohlen für Karten):

css
.card-container {
  display: flex;
  flex-wrap: nowrap;  /* Alle in einer Zeile */
  border: 2px solid #333;
  padding: 10px;
}

.card {
  width: 300px;  /* Breite wird ignoriert! */
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis:

  • Alle 5 Karten sind in einer Zeile
  • Karten sind extrem schmal (weil sie schrumpfen)

CSS (wrap - EMPFOHLEN für Karten):

css
.card-container {
  display: flex;
  flex-wrap: wrap;  /* Umbruch erlauben */
  border: 2px solid #333;
  padding: 10px;
  gap: 10px;
}

.card {
  flex: 1 0 200px;  /* Mindestens 200px breit, dann gleichmäßig verteilen */
  padding: 20px;
  background-color: lightblue;
}

Ergebnis:

  • Karten sind mindestens 200px breit
  • Wenn nicht genug Platz, brechen sie in eine neue Zeile um

5.3 flex-flow: Kurzschreibweise ​

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

Syntax:

css
.container {
  flex-flow: <flex-direction> <flex-wrap>;
}

Beispiele:

1. Horizontal mit Umbruch:

css
.container {
  display: flex;
  flex-flow: row wrap;  /* Kombination aus flex-direction: row und flex-wrap: wrap */
}

2. Vertikal ohne Umbruch:

css
.container {
  display: flex;
  flex-flow: column nowrap;  /* Kombination aus flex-direction: column und flex-wrap: nowrap */
}

3. Umgekehrte Reihenfolge mit Umbruch:

css
.container {
  display: flex;
  flex-flow: row-reverse wrap;  /* Rechts nach links, mit Umbruch */
}

Wann flex-flow verwenden? ​

Vorteile:

  • ✅ Spart Codezeilen
  • ✅ Übersichtlicher, wenn beide Eigenschaften gesetzt werden müssen

Nachteil:

  • ❌ Weniger explizit (man muss beide Werte kennen)

Empfehlung:

css
/* Weniger empfohlen: */
.container {
  flex-flow: row wrap;  /* Was genau bedeutet das? */
}

/* Mehr empfohlen (explizit): */
.container {
  flex-direction: row;
  flex-wrap: wrap;  /* Klarer und lesbarer */
}

Aber: flex-flow ist absolut in Ordnung, wenn du dich damit wohlfühlst!

5.4 Praxisbeispiel: Verschiedene Richtungs- und Umbruchkombinationen ​

Szenario: Responsive Galerie ​

Ziel:

  • Auf Desktop: Karten nebeneinander (horizontal, mit Umbruch)
  • Auf Mobile: Karten untereinander (vertikal, ohne Umbruch)

HTML:

html
<div class="gallery">
  <div class="photo">Foto 1</div>
  <div class="photo">Foto 2</div>
  <div class="photo">Foto 3</div>
  <div class="photo">Foto 4</div>
</div>

CSS (Desktop):

css
.gallery {
  display: flex;
  flex-flow: row wrap;  /* Horizontal, mit Umbruch */
  justify-content: center;  /* Zentriert (Kapitel 6) */
  gap: 20px;
  padding: 20px;
}

.photo {
  flex: 1 0 300px;  /* Mindestens 300px breit */
  height: 200px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

CSS (Mobile mit Media Query):

css
@media (max-width: 768px) {
  .gallery {
    flex-flow: column nowrap;  /* Vertikal, kein Umbruch */
  }
  
  .photo {
    flex: 0 0 auto;  /* Behält ursprüngliche Höhe bei */
  }
}

Ergebnis:

  • Desktop: Karten nebeneinander, umbrechend
  • Mobile: Karten untereinander, volle Breite

Szenario: Umgekehrte Navigation ​

Ziel:

  • Navigationselemente von rechts nach links anordnen

HTML:

html
<nav class="reverse-nav">
  <a href="#">Start</a>
  <a href="#">Produkte</a>
  <a href="#">Kontakt</a>
</nav>

CSS:

css
.reverse-nav {
  display: flex;
  flex-direction: row-reverse;  /* Von rechts nach links */
  justify-content: flex-start;  /* Jetzt am "neuen" Anfang (rechts) */
  background-color: #333;
  padding: 20px;
  gap: 20px;
}

.reverse-nav a {
  color: white;
  text-decoration: none;
}

Ergebnis:

┌──────────────────────────┐
│ Kontakt  Produkte  Start │
└──────────────────────────┘

Zusammenfassung ​

In diesem Kapitel hast du gelernt:

  • ✅ flex-direction: Richtung der Hauptachse festlegen (row, row-reverse, column, column-reverse)
  • ✅ flex-wrap: Umbruch steuern (nowrap, wrap, wrap-reverse)
  • ✅ flex-flow: Kurzschreibweise für flex-direction + flex-wrap
  • ✅ Praxisbeispiele für verschiedene Kombinationen

Nächstes Kapitel: In Kapitel 6 lernen wir justify-content kennen (Ausrichtung auf der Hauptachse).

Übungsaufgaben ​

Aufgabe 5.1 ​

Erstelle einen Container mit 6 Elementen. Verwende flex-direction: row-reverse und flex-wrap: wrap. Beobachte, wie die Elemente angeordnet sind.

Aufgabe 5.2 ​

Erstelle ein Karten-Layout mit flex-wrap: wrap. Gib den Karten eine flex-basis von 300px. Beobachte, wie die Karten auf verschiedenen Bildschirmgrößen umbrechen.

Aufgabe 5.3 ​

Erstelle eine Navigation, die auf Desktop horizontal ist (row) und auf Mobile vertikal (column). Verwende eine Media Query.

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials