CSS-Werkstatt
01 Was ist HTML? · 02 Was ist CSS? · 03 Was ist JavaScript? · 04 HTML-Struktur · 05 Box-Modell · 06 Flexbox · 07 Grid · 08 JavaScript & DOM
← Übersicht
Modul 06

Flexbox

Flexbox

offizieller Name der Spezifikation: "Flexible Box Layout Module"

Flexibel
Elemente können wachsen, schrumpfen oder sich neu verteilen, je nachdem wie viel Platz im Container gerade verfügbar ist.
Eindimensional
Flexbox ordnet Elemente entlang einer einzigen Achse an – entweder als Zeile oder als Spalte, nicht beides gleichzeitig.

Kurz gesagt: Flexbox eignet sich besonders für die Anordnung in einer Reihe oder Spalte – etwa Navigationsleisten, Button-Gruppen oder Karten, die sich gleichmäßig verteilen sollen.

Werkstatt-Regler

Die Hauptachse

flex-direction legt fest, ob die Hauptachse horizontal (row) oder vertikal (column) verläuft. justify-content wirkt immer entlang dieser Achse.

Die Kreuzachse

align-items wirkt entlang der Kreuzachse, senkrecht zur Hauptachse. Stretch ist der Standard und füllt die verfügbare Höhe.

Gap statt Margin

gap erzeugt Abstand zwischen Flex-Elementen, ohne dass Ränder mit Nachbarelementen kollidieren – sauberer als Margin-Tricks.