CSS Flexbox: Ein Leitfaden für eindimensionale Layouts

Flexbox (Flexible Box Layout) ist ein CSS3-Layoutmodell, das für die eindimensionale Ausrichtung von Elementen entwickelt wurde. "Eindimensional" bedeutet, dass Elemente entweder in einer Reihe (horizontal) oder in einer Spalte (vertikal) angeordnet werden. Flexbox bietet eine hohe Flexibilität, da Elemente dynamisch wachsen, schrumpfen und sich an den verfügbaren Platz anpassen können.

1. Grundlegendes Setup

Um Flexbox zu aktivieren, wird das display-Attribut des Eltern-Elements (Flex-Container) gesetzt. Alle direkten Kind-Elemente werden dadurch automatisch zu Flex-Items.

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

2. Die beiden Achsen

Das Verständnis der beiden Achsen ist entscheidend für die Arbeit mit Flexbox:

• Hauptachse (Main Axis): Die Primärachse, entlang der die Flex-Items angeordnet werden. Ihre Richtung wird durch flex-direction definiert.
• Querachse (Cross Axis): Die Achse, die senkrecht zur Hauptachse verläuft.

.flex-container {
  /* Definiert die Richtung der Hauptachse */
  flex-direction: row;            /* Standard: horizontal von links nach rechts */
  /* flex-direction: row-reverse;     -- horizontal von rechts nach links */
  /* flex-direction: column;          -- vertikal von oben nach unten */
  /* flex-direction: column-reverse;  -- vertikal von unten nach oben */
}

3. Eigenschaften des Flex-Containers

Zeilenumbruch (flex-wrap)

Standardmäßig versuchen Flex-Items, sich in einer einzigen Zeile anzuordnen. Mit flex-wrap erlauben Sie den Elementen, bei Platzmangel auf mehrere Zeilen umzubrechen.

.flex-container {
  flex-wrap: wrap; /* Erlaubt den Umbruch auf mehrere Zeilen */
  /* flex-wrap: nowrap; -- Standard: kein Umbruch, Elemente schrumpfen oder laufen über */
}

Ausrichtung auf der Hauptachse (justify-content)

Steuert die Verteilung des freien Platzes entlang der Hauptachse.

.flex-container {
  justify-content: flex-start;     /* Standard: am Anfang ausrichten */
  /* justify-content: flex-end;       -- am Ende ausrichten */
  /* justify-content: center;         -- zentrieren */
  /* justify-content: space-between;  -- gleichmäßig verteilen, Randelemente stoßen an die Kanten */
  /* justify-content: space-around;   -- gleichmäßig verteilen mit gleichem Platz um jedes Element */
}

Ausrichtung auf der Querachse (align-items)

Steuert, wie Flex-Items innerhalb einer einzelnen Zeile entlang der Querachse ausgerichtet werden.

.flex-container {
  align-items: stretch;     /* Standard: dehnt Elemente aus, um den Container auszufüllen */
  /* align-items: flex-start;  -- am Anfang der Querachse ausrichten */
  /* align-items: flex-end;    -- am Ende der Querachse ausrichten */
  /* align-items: center;      -- zentrieren */
  /* align-items: baseline;    -- an der Grundlinie des Textes ausrichten */
}

4. Eigenschaften der Flex-Items

Die flex-Kurzschreibweise (Empfohlen)

Die flex-Eigenschaft ist eine Kombination aus drei Werten: flex-grow, flex-shrink und flex-basis.

.flex-item {
  /* Syntax: flex: <grow> <shrink> <basis>; */
  flex: 1 0 250px;
}

• flex-grow (hier 1): Bestimmt, ob und wie stark das Element wächst, um freien Platz auszufüllen (Verhältniswert). 0 bedeutet kein Wachstum.
• flex-shrink (hier 0): Bestimmt, ob und wie stark das Element schrumpft, wenn der Platz nicht ausreicht. 0 verhindert das Schrumpfen.
• flex-basis (hier 250px): Definiert die initiale Standardgröße des Elements, bevor der freie Platz definiert wird.

Visuelle Reihenfolge (order)

Ermöglicht es, die visuelle Reihenfolge der Elemente unabhängig von ihrer Reihenfolge im HTML-Code (DOM) zu ändern.

.flex-item-special {
  order: -1; /* Verschiebt dieses Element ganz nach vorne */
}

Gängige Anwendungsbeispiele

Perfekte Zentrierung (Klassiker)

.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Volle Bildschirmhöhe */
}

Gleiche Spaltenbreiten

.column-container {
  display: flex;
}
.column {
  flex: 1; /* Alle Spalten wachsen gleichmäßig und teilen sich den Platz */
  padding: 1rem;
}

Fazit

Flexbox revolutionierte das Web-Layout, indem es eine einfache und intuitive Methode zur Ausrichtung und Verteilung von Elementen bereitstellte. Es ist ideal für Navigationen, UI-Komponenten (wie Card-Layouts) und einfache einspaltige oder einzeilige Ausrichtungen. Für komplexe, zweidimensionale Layouts (Raster) ist das CSS Grid Layout die empfohlene Ergänzung.