CSS Flexbox – Grundlagen

lock
Bevorstehend

Visuelles Cheatsheet zu den Grundlagen von CSS Flexbox: display:flex, flex-direction, justify-content und align-items mit live HTML-Demos.

Ziele dieses Moduls
  • Sie können ein Element mit display: flex zu einem Flex-Container machen.
    Verstehen
  • Sie können mit flex-direction die Richtung der Anordnung bestimmen (row oder column) und erklären, wie sich dadurch Hauptachse und Querachse verändern.
    Verstehen
  • Sie können mit justify-content Elemente entlang der Hauptachse ausrichten (z. B. center, space-between).
    Anwenden
  • Sie können mit align-items Elemente entlang der Querachse ausrichten (z. B. center, flex-start, flex-end).
    Anwenden
  • Sie können einfache Layoutprobleme mit Flexbox lösen, z. B. Elemente horizontal oder vertikal zentrieren.
    Anwenden

Dieses Lernmodul führt Sie in die Grundlagen von CSS Flexbox ein. Flexbox ist ein modernes Layout-System, das es einfach macht, Elemente horizontal und vertikal auszurichten. Mit interaktiven HTML-Demos zu display: flex, flex-direction, justify-content und align-items lernen Sie die wichtigsten Eigenschaften kennen und können diese direkt in der Praxis anwenden.

display: flex – Der Flex-Container

Mit display: flex verwandeln Sie ein Element in einen Flex-Container. Alle direkten Kinder werden automatisch zu Flex-Items und ordnen sich nebeneinander an.

OHNE display: flex – Elemente stapeln sich
Item 1
Item 2
Item 3
MIT display: flex – Elemente ordnen sich nebeneinander an
Item 1
Item 2
Item 3

flex-direction – Richtung der Anordnung

Mit flex-direction legen Sie fest, in welche Richtung die Flex-Items angeordnet werden. Dies bestimmt auch die Hauptachse (main axis) und die Querachse (cross axis).

flex-direction: row (Standard)
1
2
3
→ Hauptachse horizontal
flex-direction: row-reverse
1
2
3
← Hauptachse horizontal (umgekehrt)
flex-direction: column
1
2
3
↓ Hauptachse vertikal
flex-direction: column-reverse
1
2
3
↑ Hauptachse vertikal (umgekehrt)

justify-content – Ausrichtung auf der Hauptachse

Mit justify-content steuern Sie, wie die Flex-Items entlang der Hauptachse verteilt werden. Bei flex-direction: row ist das die horizontale Achse.

flex-start
A
B
C
flex-end
A
B
C
center
A
B
C
space-between
A
B
C
space-around
A
B
C
space-evenly
A
B
C

align-items – Ausrichtung auf der Querachse

Mit align-items steuern Sie, wie die Flex-Items entlang der Querachse (senkrecht zur Hauptachse) ausgerichtet werden. Bei flex-direction: row ist das die vertikale Achse.

stretch
A
B
C
flex-start
A
B
C
flex-end
A
B
C
center
A
B
C
baseline
A
B
C

Challenge

Praxis: Zentrieren mit Flexbox

Eine der häufigsten Aufgaben in der Webentwicklung: Ein Element horizontal und vertikal zentrieren. Mit Flexbox ist das ganz einfach – die Kombination justify-content: center + align-items: center ist das "magische Rezept".

justify-content: center
Box
align-items: center
Box
justify-content: center
+ align-items: center
Box

Note

Schnellreferenz – Flexbox Cheatsheet

PropertyWerteWirkung
display: flexflexErstellt einen Flex-Container
flex-directionrow | column | row-reverse | column-reverseLegt Richtung der Hauptachse fest
justify-contentflex-start | flex-end | center | space-between | space-around | space-evenlyAusrichtung entlang der Hauptachse
align-itemsstretch | flex-start | flex-end | center | baselineAusrichtung entlang der Querachse