CSS Layout mit Flexbox

Diese Dokumentation erläutert die Grundlagen, Ausrichtungen und Eigenschaften des CSS Flexbox-Layoutmodus basierend auf dem Referenzmaterial[cite: 11].

Flexbox ist ein Anzeigemodus, der Elemente entlang einer Achse (horizontal oder vertikal) anordnet[cite: 11]. Er eignet sich besonders für Komponenten wie Menüs, Galerien und responsive Seitenlayouts[cite: 11].

Um den Flexbox-Modus zu aktivieren, wird die Eigenschaft display: flex; auf das Eltern-Element angewendet[cite: 11].

• Der Eltern-Container wird zum Flex-Container[cite: 11].
• Alle direkten untergeordneten Elemente werden zu Flex-Elementen (Flex Items)[cite: 11].

.container {
  display: flex;
}

Bestimmt die Hauptrichtung, in der die Flex-Elemente angeordnet werden[cite: 11]:

• row — Horizontal von links nach rechts (Standard)[cite: 11].
• row-reverse — Horizontal von rechts nach links[cite: 11].
• column — Vertikal von oben nach unten[cite: 11].
• column-reverse — Vertikal von unten nach oben[cite: 11].

Steuert, ob Elemente bei Platzmangel in neue Zeilen umbrechen[cite: 11]:

• nowrap — Alle Elemente bleiben auf einer Zeile (Standard; kann zu Stauchung oder Überlauf führen)[cite: 11].
• wrap — Elemente brechen bei Bedarf auf mehrere Zeilen um[cite: 11].
• wrap-reverse — Elemente brechen in umgekehrter Richtung um[cite: 11].

Kurzschreibweise für flex-direction und flex-wrap in einer Deklaration[cite: 11].

.container {
  display: flex;
  flex-flow: column wrap; /* Spaltenanordnung mit Umbruch */
}

Flexbox arbeitet richtungsunabhängig mit zwei Achsen[cite: 11]:

• Hauptachse (Main Axis): Verläuft entlang der eingestellten Strömungsrichtung (bei row horizontal, bei column vertikal)[cite: 11].
• Querachse (Cross Axis): Verläuft senkrecht zur Hauptachse[cite: 11].

Richtet die Elemente entlang der Hauptachse aus (wird auf den Container angewendet)[cite: 11]:

• flex-start — Elemente werden am Anfang der Hauptachse ausgerichtet (Standard)[cite: 11].
• flex-end — Elemente werden am Ende der Hauptachse ausgerichtet[cite: 11].
• center — Zentriert die Elemente auf der Hauptachse[cite: 11].
• space-between — Gleichmäßige Verteilung; erstes Element am Anfang, letztes am Ende[cite: 11].
• space-around — Gleichmäßiger Abstand um alle Elemente herum[cite: 11].

• align-items (Container): Richtet alle Elemente entlang der Querachse aus (Werte: stretch [Standard], flex-start, flex-end, center, baseline)[cite: 11].
• align-self (Element): Überschreibt align-items für ein einzelnes Flex-Element[cite: 11].

Steuert die Ausrichtung der Zeilen auf der Querachse, wenn flex-wrap: wrap; aktiv ist und zusätzlicher Platz vorhanden ist[cite: 11] (Werte: stretch [Standard], flex-start, flex-end, center, space-between, space-around)[cite: 11].

Die Eigenschaft flex ist eine Kurzform für flex-grow, flex-shrink und flex-basis zur Verteilung des verbleibenden Raums[cite: 11].

• flex-grow: Zahl, die bestimmt, wie stark ein Element im Verhältnis zu anderen wachsen darf (0 = kein Wachstum)[cite: 11].
• flex-shrink: Bestimmt, wie stark ein Element bei Platzmangel schrumpfen darf[cite: 11].
• flex-basis: Gibt die Grundgröße des Elements vor Verteilung des Restraums an[cite: 11].

• flex: initial; (entspricht 0 1 auto) — Wächst nicht, kann schrumpfen[cite: 11].
• flex: auto; (entspricht 1 1 auto) — Vollständig flexibel[cite: 11].
• flex: none; (entspricht 0 0 auto) — Vollständig starr[cite: 11].

/* Beispiel für flexibles Wachstum */
.item-groß {
  flex: 3 1 auto; /* Erhält dreimal mehr freien Zusatzraum als Standard-Items */
}

Die Eigenschaft order steuert die visuelle Reihenfolge von Flex-Elementen unabhängig von ihrer Reihenfolge im HTML-Quelltext[cite: 11].

• Standardwert: 0[cite: 11]
• Elemente werden aufsteigend nach ihrem Wertsortiert[cite: 11].
• Elemente mit demselben Wert bilden eine Ordinalgruppe und behalten ihre Quellcode-Reihenfolge bei[cite: 11].

.box-letzte {
  order: 1; /* Wandert ans Ende, wenn andere den Standardwert 0 haben */
}