Flexbox Grundlagen

Flexbox ist ein Layout-System in CSS, mit dem du Elemente in einer Richtung anordnen kannst – entweder in einer Zeile oder in einer Spalte. Du setzt display: flex auf den Container, und die direkten Kindelemente werden automatisch als Flex-Items behandelt.

Was ist ein Flexbox-Layout?

Ein Flexbox-Layout besteht aus zwei Teilen:

• Flex-Container – das Eltern-Element mit display: flex
• Flex-Items – die direkten Kindelemente im Container, die ausgerichtet und verteilt werden

Flexbox ist ein eindimensionales Layout-System. Du steuerst also entweder eine Zeile oder eine Spalte – nicht beides gleichzeitig wie bei CSS Grid. Das macht Flexbox ideal für Navigationen, Button-Leisten oder Bereiche, in denen Elemente nebeneinander oder untereinander stehen sollen.

Hauptachse und Querachse

In einem Flex-Container gibt es zwei Richtungen:

• Hauptachse (Main Axis) – die Richtung, in der die Items angeordnet werden (standardmäßig horizontal, von links nach rechts)
• Querachse (Cross Axis) – die Richtung senkrecht dazu (standardmäßig vertikal)

Mit flex-direction kannst du die Hauptachse drehen – zum Beispiel auf column, damit die Items untereinander statt nebeneinander stehen. Die ausführlichen Eigenschaften lernst du in den folgenden Flexbox-Kapiteln.

Ein einfaches Beispiel

1<div class="container">
2    <div>Item 1</div>
3    <div>Item 2</div>
4    <div>Item 3</div>
5</div>

1.container {
2    display: flex;
3    gap: 1rem;
4}

Die drei Kindelemente stehen nebeneinander in einer Zeile. Mit gap entsteht automatisch Abstand zwischen den Items – ohne extra Margin.

Einsatzgebiete von Flexbox

Flexbox eignet sich besonders für:

• Navigationen – Menüpunkte horizontal oder vertikal ausrichten
• Button-Leisten – mehrere Buttons nebeneinander mit gleichmäßigem Abstand
• Karten in einer Reihe – Produkte, Team-Mitglieder oder Icons nebeneinander
• Vertikal zentrieren – Inhalte in der Mitte eines Containers platzieren
• Footer-Layouts – Links, Mitte und Rechts in einer Zeile verteilen

Flexbox oder CSS Grid?

Flexbox und Grid ergänzen sich. Eine einfache Faustregel:

• Flexbox – wenn du Elemente in einer Richtung anordnest (eine Zeile oder eine Spalte)
• CSS Grid – wenn du Zeilen und Spalten gleichzeitig planst und das gesamte Layout strukturierst

In der Praxis kombinierst du oft beides: Grid für das große Seitenlayout, Flexbox für kleinere Bereiche wie Navigation, Header oder Formularzeilen.