Zum Inhalt springen
IBAW Web Engineer

Flexbox-Layout

Zu normalem Modus wechseln

Flexbox (Flexible Box Layout) ist ein leistungsstarkes Layout-System in CSS, das für die Gestaltung von eindimensionalen Layouts optimiert ist. Es erleichtert die Verteilung von Elementen in einer Reihe oder Spalte und bietet flexible Möglichkeiten zur Ausrichtung, Grössenanpassung und Verteilung von Platz.

Grundlagen von Flexbox

Abschnitt betitelt „Grundlagen von Flexbox“

Flexbox besteht aus zwei Hauptkomponenten:

  • Flex-Container: Das übergeordnete Element, in dem Flexbox aktiviert wird
  • Flex-Items: Die direkten Kindelemente des Flex-Containers

Erstellen eines Flex-Containers

Abschnitt betitelt „Erstellen eines Flex-Containers“

Um Flexbox zu verwenden, setzen Sie die display-Eigenschaft des übergeordneten Elements auf flex oder inline-flex:

.container {
  display: flex; /* Erzeugt einen Block-Level-Flex-Container */
}


.inline-container {
  display: inline-flex; /* Erzeugt einen Inline-Flex-Container */
}

Der Unterschied:

  • flex erstellt einen Block-Level-Container, der die gesamte verfügbare Breite einnimmt
  • inline-flex erstellt einen Container, der nur so breit ist wie sein Inhalt, ähnlich wie inline-block

Flexbox-Richtung und Achsen

Abschnitt betitelt „Flexbox-Richtung und Achsen“

Bei Flexbox gibt es zwei Achsen:

  • Hauptachse (Main Axis): Die primäre Achse, entlang der die Flex-Items angeordnet werden
  • Kreuzachse (Cross Axis): Die Achse senkrecht zur Hauptachse

Richtung der Hauptachse (flex-direction)

Abschnitt betitelt „Richtung der Hauptachse (flex-direction)“

Die flex-direction-Eigenschaft legt die Richtung der Hauptachse fest:

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


.column {
  display: flex;
  flex-direction: column; /* Von oben nach unten */
}


.row-reverse {
  display: flex;
  flex-direction: row-reverse; /* Von rechts nach links */
}


.column-reverse {
  display: flex;
  flex-direction: column-reverse; /* Von unten nach oben */
}

Flexbox-Richtungen

Umbruch von Flex-Items (flex-wrap)

Abschnitt betitelt „Umbruch von Flex-Items (flex-wrap)“

Standardmässig versuchen alle Flex-Items, in eine Zeile oder Spalte zu passen. Mit flex-wrap können Sie festlegen, ob Items bei Bedarf umbrechen sollen:

.no-wrap {
  display: flex;
  flex-wrap: nowrap; /* Standardwert: kein Umbruch */
}


.wrap {
  display: flex;
  flex-wrap: wrap; /* Umbruch in neue Zeilen/Spalten */
}


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

Kurzschreibweise: flex-flow

Abschnitt betitelt „Kurzschreibweise: flex-flow“

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

.container {
  display: flex;
  flex-flow: row wrap; /* Entspricht flex-direction: row; flex-wrap: wrap; */
}

Ausrichtung von Flex-Items

Abschnitt betitelt „Ausrichtung von Flex-Items“

Flexbox bietet verschiedene Eigenschaften zur Ausrichtung von Items entlang der Haupt- und Kreuzachse.

Ausrichtung entlang der Hauptachse (justify-content)

Abschnitt betitelt „Ausrichtung entlang der Hauptachse (justify-content)“
.container {
  display: flex;
  justify-content: flex-start; /* Standardwert: Items am Anfang der Hauptachse */
}


.centered {
  display: flex;
  justify-content: center; /* Items in der Mitte der Hauptachse */
}


.end {
  display: flex;
  justify-content: flex-end; /* Items am Ende der Hauptachse */
}


.space-between {
  display: flex;
  justify-content: space-between; /* Gleichmässiger Abstand zwischen den Items, ohne Rand */
}


.space-around {
  display: flex;
  justify-content: space-around; /* Gleichmässiger Abstand um die Items herum */
}


.space-evenly {
  display: flex;
  justify-content: space-evenly; /* Gleichmässiger Abstand zwischen allen Items und Rändern */
}

justify-content Optionen

Ausrichtung entlang der Kreuzachse (align-items)

Abschnitt betitelt „Ausrichtung entlang der Kreuzachse (align-items)“
.container {
  display: flex;
  align-items: stretch; /* Standardwert: Items werden gedehnt, um den Container zu füllen */
}


.start {
  display: flex;
  align-items: flex-start; /* Items am Anfang der Kreuzachse */
}


.centered-cross {
  display: flex;
  align-items: center; /* Items in der Mitte der Kreuzachse */
}


.end-cross {
  display: flex;
  align-items: flex-end; /* Items am Ende der Kreuzachse */
}


.baseline {
  display: flex;
  align-items: baseline; /* Items werden an ihrer Textgrundlinie ausgerichtet */
}

align-items Optionen

Ausrichtung einzelner Flex-Items (align-self)

Abschnitt betitelt „Ausrichtung einzelner Flex-Items (align-self)“

Sie können die Ausrichtung einzelner Flex-Items unabhängig von den anderen überschreiben:

.container {
  display: flex;
  align-items: center; /* Standardausrichtung für alle Items */
}


.item {
  align-self: flex-start; /* Dieses Item wird oben ausgerichtet */
}


.another-item {
  align-self: flex-end; /* Dieses Item wird unten ausgerichtet */
}

Ausrichtung mehrzeiliger Flex-Container (align-content)

Abschnitt betitelt „Ausrichtung mehrzeiliger Flex-Container (align-content)“

Wenn flex-wrap: wrap gesetzt ist und mehrere Zeilen entstehen, können Sie mit align-content steuern, wie diese Zeilen verteilt werden:

.multi-line {
  display: flex;
  flex-wrap: wrap;
  height: 400px; /* Container-Höhe */
  align-content: flex-start; /* Zeilen am Anfang der Kreuzachse */
}


.centered-lines {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: center; /* Zeilen in der Mitte der Kreuzachse */
}


.space-between-lines {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: space-between; /* Gleichmässiger Abstand zwischen den Zeilen */
}

align-content Optionen

Flex-Items: Grösse und Flexibilität

Abschnitt betitelt „Flex-Items: Grösse und Flexibilität“

Flexbox bietet leistungsstarke Möglichkeiten zur Steuerung der Grösse und Flexibilität von Items.

Grundlegende Eigenschaften für Flex-Items

Abschnitt betitelt „Grundlegende Eigenschaften für Flex-Items“

flex-grow

Abschnitt betitelt „flex-grow“

Die flex-grow-Eigenschaft bestimmt, wie viel vom verfügbaren Platz ein Item im Verhältnis zu den anderen Items einnehmen soll:

.item {
  flex-grow: 0; /* Standardwert: Item wächst nicht */
}


.growing-item {
  flex-grow: 1; /* Item nimmt verfügbaren Platz ein */
}


.double-growing-item {
  flex-grow: 2; /* Item nimmt doppelt so viel Platz ein wie ein Item mit flex-grow: 1 */
}

flex-shrink

Abschnitt betitelt „flex-shrink“

Die flex-shrink-Eigenschaft bestimmt, wie stark ein Item schrumpfen kann, wenn nicht genug Platz vorhanden ist:

.item {
  flex-shrink: 1; /* Standardwert: Item kann schrumpfen */
}


.non-shrinking {
  flex-shrink: 0; /* Item schrumpft nicht (behält seine Grösse) */
}


.double-shrinking {
  flex-shrink: 2; /* Item schrumpft doppelt so stark wie standard Items */
}

flex-basis

Abschnitt betitelt „flex-basis“

Die flex-basis-Eigenschaft definiert die Ausgangsgrösse eines Flex-Items, bevor verfügbarer Platz verteilt wird:

.item {
  flex-basis: auto; /* Standardwert: Basiert auf der Content-Grösse */
}


.specific-width {
  flex-basis: 200px; /* Item startet mit 200px Breite (bei row) oder Höhe (bei column) */
}


.percentage-width {
  flex-basis: 50%; /* Item startet mit 50% der Container-Grösse */
}

Kurzschreibweise: flex

Abschnitt betitelt „Kurzschreibweise: flex“

Die flex-Eigenschaft ist eine Kurzschreibweise für flex-grow, flex-shrink und flex-basis:

.item {
  flex: 0 1 auto; /* Standardwert: flex-grow: 0, flex-shrink: 1, flex-basis: auto */
}


.growing {
  flex: 1; /* Entspricht flex: 1 1 0%; Item wächst und schrumpft */
}


.fixed-width {
  flex: 0 0 200px; /* Item wächst nicht, schrumpft nicht, hat 200px Basis-Breite */
}


.flexible {
  flex: 1 1 300px; /* Item startet mit 300px, kann aber wachsen und schrumpfen */
}

Übliche flex-Werte und ihre Bedeutung

Abschnitt betitelt „Übliche flex-Werte und ihre Bedeutung“
  • flex: 1 – Das Item kann wachsen und schrumpfen, ignoriert seine Ausgangsgrösse
  • flex: 0 0 auto – Das Item behält seine natürliche Grösse und ändert sich nicht
  • flex: 0 0 200px – Das Item ist genau 200px breit und ändert sich nicht
  • flex: 1 1 0% – Das Item ist vollständig flexibel, basierend auf verfügbarem Platz

Reihenfolge von Flex-Items

Abschnitt betitelt „Reihenfolge von Flex-Items“

Die order-Eigenschaft ermöglicht es, die visuelle Reihenfolge von Flex-Items unabhängig von ihrer Reihenfolge im HTML zu ändern:

.first {
  order: -1; /* Erscheint vor Items mit höheren order-Werten */
}


.item {
  order: 0; /* Standardwert */
}


.last {
  order: 1; /* Erscheint nach Items mit niedrigeren order-Werten */
}

Alle Items mit dem gleichen order-Wert werden in ihrer ursprünglichen Reihenfolge angezeigt.

Praktische Anwendungsbeispiele für Flexbox

Abschnitt betitelt „Praktische Anwendungsbeispiele für Flexbox“

Zentrieren eines Elements horizontal und vertikal

Abschnitt betitelt „Zentrieren eines Elements horizontal und vertikal“
.center-container {
  display: flex;
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  height: 100vh; /* Volle Viewport-Höhe */
}
Abschnitt betitelt „Navigationsleiste“
.navbar {
  display: flex;
  justify-content: space-between; /* Logo links, Menü rechts */
  align-items: center;
  padding: 1rem;
  background-color: #333;
  color: white;
}


.logo {
  /* Keine speziellen Flex-Eigenschaften nötig */
}


.menu {
  display: flex;
  gap: 1rem; /* Abstand zwischen Menüpunkten */
}

Karten mit gleicher Höhe

Abschnitt betitelt „Karten mit gleicher Höhe“
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}


.card {
  flex: 1 1 300px; /* Basis: 300px, kann wachsen und schrumpfen */
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}


.card-header {
  /* Überschrift */
}


.card-body {
  flex-grow: 1; /* Sorgt dafür, dass alle Karten die gleiche Höhe haben */
}


.card-footer {
  margin-top: auto; /* Drückt den Footer nach unten */
}

Flexbox vs. andere Layoutmethoden

Abschnitt betitelt „Flexbox vs. andere Layoutmethoden“

Vorteile von Flexbox

Abschnitt betitelt „Vorteile von Flexbox“
  • Einfache vertikale Zentrierung: Anders als bei älteren Methoden ist die vertikale Zentrierung mit Flexbox trivial
  • Dynamische Grössenanpassung: Elemente können proportional wachsen und schrumpfen
  • Reihenfolgeänderung: Die visuelle Reihenfolge kann unabhängig von der HTML-Struktur geändert werden
  • Ausrichtungskontrolle: Präzise Kontrolle über die Ausrichtung in beiden Dimensionen
  • Platzverteilung: Einfache Verteilung von Platz zwischen und um Elemente

Wann Flexbox verwenden?

Abschnitt betitelt „Wann Flexbox verwenden?“

Flexbox eignet sich besonders gut für:

  • Eindimensionale Layouts: Zeilen oder Spalten von Elementen
  • Komponenten-Layouts: Navigation, Karten, Formulare
  • Vertikale Zentrierung: Elemente innerhalb eines Containers zentrieren
  • Variable Breiten: Wenn Elemente proportional wachsen/schrumpfen sollen
  • Ungleiche Grössen: Wenn Elemente unterschiedliche Grössen haben, aber Ausrichtung wichtig ist

Grenzen von Flexbox

Abschnitt betitelt „Grenzen von Flexbox“

Für komplexe zweidimensionale Layouts (Raster/Gitter) ist CSS Grid oft besser geeignet. In manchen Fällen ist eine Kombination aus beiden am effektivsten.

Übung: Flexbox Navigation und Card Layout

Abschnitt betitelt „Übung: Flexbox Navigation und Card Layout“

Im nächsten Kapitel werden wir uns mit CSS Grid beschäftigen, einem leistungsstarken Layout-System für zweidimensionale Layouts, das Flexbox ideal ergänzt.

War diese Seite hilfreich?