CSS INTENSIVSTATION

CSS Flexbox

Flexbox ist ein Layoutmodell, das speziell für die Verteilung von Raum und die Ausrichtung von Elementen in einem Container entwickelt wurde. Es arbeitet in einer Dimension – entweder horizontal (Zeile) oder vertikal (Spalte). Flexbox löst typische UI-Anforderungen wie vertikal zentrieren, Abstände, gleich hohe Elemente und flexible Breiten sehr elegant.

Anwendungen mit Flexbox

  • Navigationen (z. B. Logo links, Menü rechts)
  • Horizontale oder vertikale Zentrierung
  • Gleichmäßige Abstände zwischen Elementen
  • Dynamische Verteilung von Raum in einer Zeile oder Spalte
  • Komponenten mit variabler oder unbekannter Größe

Flexbox Grundprinzip

Flexbox funktioniert mit zwei Arten von Elementen:

  • Flex Container Das Eltern-Element mit display: flex
  • Flex Items Die direkten Kinder des Containers

Sobald ein Element display: flex bekommt, wird es zum Flex-Container. Alle direkten Kindelemente werden Flex-Items.
Standard: Items liegen in einer Reihe, starten links und haben nur so viel Breite wie nötig.

1
2
3
.container {
    display: flex; /* Flex-Container */
}
/* direkte Kinder = Flex-Items */

Standardverhalten von display: flex

  • Alle Kinder werden zu Flex Items
  • Items ordnen sich horizontal an (Standardrichtung: row)
  • Items nehmen nur so viel Platz ein wie nötig
  • Items haben die gleiche Höhe (Standard: stretch)

Flexbox Achsen

Flexbox denkt in Achsen: Main Axis (Hauptachse) und Cross Axis (Querachse).

Main Axis (Hauptachse)
→ →  →  →  →  →  →  →

Cross Axis (Querachse)
↓
↓
↓
  • Main Axis – Die Hauptrichtung (horizontal bei row, vertikal bei column)
  • Cross Axis – Senkrecht zur Main Axis

Container Eigenschaften

Diese Eigenschaften werden auf den Flex Container (Eltern-Element) angewendet.

1. flex-direction

Die Hauptachse wird durch flex-direction definiert – horizontal oder vertikal, vorwärts oder rückwärts.

  • row Horizontal, von links nach rechts (Standard)
  • row-reverse Horizontal, von rechts nach links
  • column Vertikal, von oben nach unten
  • column-reverse Vertikal, von unten nach oben

row (Standard)

1
2
3
flex-direction: row;

column

1
2
3
flex-direction: column;

row-reverse

1
2
3
flex-direction: row-reverse;

2. justify-content

Verteilt Items entlang der Hauptachse (horizontal bei row, vertikal bei column). Wirkt nur, wenn entlang der Hauptachse freier Platz vorhanden ist.

  • flex-start Items am Anfang (Standard)
  • flex-end Items am Ende
  • center Items zentriert
  • space-between Items verteilt, kein Rand außen
  • space-around Items verteilt, halber Rand außen
  • space-evenly Items gleichmäßig verteilt, gleicher Rand

center

1
2
3
justify-content: center;

space-between

1
2
3
justify-content: space-between;

space-around

1
2
3
justify-content: space-around;

space-evenly

1
2
3
justify-content: space-evenly;

3. align-items

Bewegt Items entlang der Querachse (Cross Axis). Vertikal bei row, horizontal bei column. Wirkt innerhalb der verfügbaren Größe des Containers entlang der Querachse.

  • stretch Items dehnen sich aus (Standard)
  • flex-start Items am Anfang
  • flex-end Items am Ende
  • center Items zentriert
  • baseline Items an Textbasislinie ausgerichtet

center

1
2
Zwei Zeilen
3
align-items: center;

flex-end

1
2
Zwei Zeilen
3
align-items: flex-end;

stretch (Standard)

1
2
3
align-items: stretch;

4. flex-wrap

Bestimmt, ob Items umbrechen dürfen, wenn sie nicht in eine Zeile passen. Standard ist nowrap. Mit wrap dürfen Items umbrechen.

  • nowrap Kein Umbruch, Items schrumpfen (Standard)
  • wrap Items umbrechen in neue Zeile/Spalte
  • wrap-reverse Umbruch in umgekehrter Richtung

wrap

1
2
3
4
5
6
flex-wrap: wrap;

Browserfenster schmaler machen → die Reihe bricht um.

5. gap

Definiert den Abstand zwischen Flex Items innerhalb des Containers. Ersetzt die Arbeit mit Margins zwischen den Items.

1
2
3
gap: 20px;

/* Oder getrennt: */
row-gap: 20px;
column-gap: 30px;

6. align-content

Verteilt mehrere Zeilen entlang der Querachse. Funktioniert nur mit flex-wrap: wrap. Betrifft den Raum zwischen den Zeilen.

  • flex-start Zeilen am Anfang
  • flex-end Zeilen am Ende
  • center Zeilen zentriert
  • space-between Zeilen verteilt
  • space-around Zeilen mit Abstand
  • stretch Zeilen gedehnt (Standard)

Item-Eigenschaften

Während der Container die Struktur bestimmt, steuern die Item-Eigenschaften einzelne Flex Items (Kinder).

  • flex-grow Wachstumsfaktor bei freiem Platz.
  • flex-shrink Schrumpffaktor bei Platzmangel.
  • flex-basis Startgröße bevor Wachstum oder Schrumpfen berechnet wird.

1. flex-grow

Bestimmt, wie freier Platz im Container auf die Items verteilt wird. Die Verteilung erfolgt im Verhältnis der gesetzten Werte. Standardwert: 0 (wächst nicht).

1
2 (flex-grow: 2)
3
.item-2 {
    flex-grow: 2; /* nimmt doppelt so viel Platz */
}
.item-1,
.item-3 {
    flex-grow: 1; /* wachsen mit Faktor 1 */
}

2. flex-shrink

Bestimmt, wie stark ein Item schrumpft, wenn im Container nicht genug Platz vorhanden ist. Der Wert wirkt im Verhältnis zu den anderen Items. Standardwert: 1 (schrumpft).

.item {
    flex-shrink: 0; /* schrumpft nicht */
}
.other-item {
    flex-shrink: 2; /* schrumpft doppelt so stark */
}

3. flex-basis

Definiert die Ausgangsgröße eines Items, bevor Wachstum oder Schrumpfen berechnet wird. Standard: auto.

.item {
    flex-basis: 200px; /* Startet mit 200px Breite */
}

.item {
    flex-basis: 30%; /* Startet mit 30% der Container-Breite */
}

.item {
    flex-basis: auto; /* Nutzt width/height oder Content-Größe */
}

Kurzschreibweise flex

flex kombiniert flex-grow, flex-shrink und flex-basis:

/* flex: grow shrink basis */

flex: 1;          /* flex: 1 1 0% */
flex: 1 1 200px;  /* grow: 1, shrink: 1, basis: 200px */
flex: 0 0 auto;   /* wächst nicht, schrumpft nicht */

Häufige flex-Werte:

  • flex: 1 – Item wächst und füllt verfügbaren Raum
  • flex: 0 0 auto – Item behält seine Größe
  • flex: 1 1 300px – Startet mit 300px, wächst und schrumpft
  • flex: none – Wie flex: 0 0 auto

align-self

Überschreibt align-items für ein einzelnes Item.

1 (flex-start)
2 (center)
3 (flex-end)
.item-1 {
    align-self: flex-start;
}
.item-2 {
    align-self: center;
}
.item-3 {
    align-self: flex-end;
}

order - Reihenfolge ändern

Ändert die visuelle Reihenfolge von Items, ohne das HTML zu ändern. Standardwert: 0.

1 (order: 3)
2 (order: 1)
3 (order: 2)
.item-1 { order: 3; } /* erscheint zuletzt */
.item-2 { order: 1; } /* erscheint zuerst */
.item-3 { order: 2; } /* erscheint in der Mitte */

Accessibility: order ändert nur die visuelle Reihenfolge, nicht die Tab-Reihenfolge für Tastaturnutzer!

Flexbox vs Grid

Wann Flexbox, wann CSS Grid?

  • Flexbox Eindimensionale Layouts (Zeile ODER Spalte)
  • Grid Zweidimensionale Layouts (Zeilen UND Spalten)

Flexbox verwenden für:

  • Navigation Bars
  • Button-Gruppen
  • Komponenten mit flexibler Größe
  • Listenelemente in einer Richtung
  • Vertikale oder horizontale Zentrierung

Grid verwenden für:

  • Gesamtes Seitenlayout
  • Magazine-Layouts mit Zeilen und Spalten
  • Komplexe Grid-Systeme
  • Überlappende Elemente

Tipp: Flexbox und Grid ergänzen sich – oft nutzt man Grid für das Gesamtlayout und Flexbox für einzelne Komponenten!

Cheat-Sheet

Container-Eigenschaften

  • display: flex; aktiviert Flexbox, macht die direkten Kinder zu Flex-Items.
  • flex-direction legt die Hauptachse fest (row | column).
  • flex-wrap erlaubt oder verhindert Zeilenumbrüche.
  • justify-content verteilt Items entlang der Hauptachse.
  • align-items richtet Items entlang der Querachse aus.
  • align-content verteilt mehrere Zeilen entlang der Querachse.
  • gap definiert Abstände zwischen Items.

Item-Eigenschaften

  • flex-grow bestimmt den Wachstumsfaktor bei freiem Platz.
  • flex-shrink bestimmt den Schrumpffaktor bei Platzmangel.
  • flex-basis definiert die Ausgangsgröße vor der Verteilung.
  • flex Kurzschreibweise für grow, shrink und basis.
  • align-self überschreibt align-items für ein einzelnes Item.
  • order bestimmt die visuelle Reihenfolge der Items.

Kurz gesagt

  • Flexbox denkt in Main Axis und Cross Axis – die Achsen bestimmen alles.
  • flex: 1 ist die häufigste Kurzschreibweise (1 1 0%) und lässt Items verfügbaren Raum teilen.
  • flex-basis definiert die Startgröße, bevor Wachstum oder Schrumpfen berechnet wird.
  • flex-wrap: wrap verhindert, dass Items bei Platzmangel unkontrolliert schrumpfen.
  • Perfekte Zentrierung: justify-content: center + align-items: center.