Flexbox Eigenschaften und Werte in der Übersicht

Hier findest du eine kleine Übersicht über die Flexbox-Eigenschaften und Werte. Da ich sie selbst noch nicht komplett verinnerlicht habe und immer wieder einmal nachschauen muss, ist sie auch für mich als Referenz sehr nützlich.

Eigenschaft justify-content

  • flex-start | Elemente im Container links ausrichten
  • flex-end | Elemente im Container rechts ausrichten
  • center | Elemente im Container mittig ausrichten.
  • space-between | Ausrichtung der Elemente mit gleichem Innenabstand
  • space-around | Ausrichtung der Elemente mit gleichem Außenabstand

Eigenschaft align-items

  • flex-start | Ausrichtung der Elemente oben am Container
  • flex-end | Ausrichtung der Elemente unten am Container
  • center | Ausrichtung der Elemente mittig Container
  • baseline | Ausrichtung der Elemente an der Grundlinie des Containers
  • stretch | Streckung der Elemente um Container auszufüllen

Eigenschaft flex-direction

  • row | Ausrichtung der Elemente in Textrichtung
  • row-reverse | Ausrichtung der Elemente entgegen der Textrichtung
  • column | Ausrichtung der Elemente von oben nach unten
  • column-reverse | Ausrichtung der Elemente von unten nach oben

Eigenschaft align-content

  • flex-start | Ausrichtung der Zeilen oben im Container
  • flex-end | Ausrichtung der Zeilen unten im Container
  • center | Ausrichtung der Zeilen in der Mitte des Containers
  • space-between | Anordnung der  Zeilen mit gleichmäßigem Innenabstand
  • space-around | Anordnung der Zeilen mit gleichmäßigem Außenabstand
  • stretch | Zeilen strecken zum Ausfüllen des Containers

Mit der order-Eigenschaft kann auch die Reihenfolge individuell geändert werden. Gibst einem Flex-Item innerhalb einer Flexbox die Deklaration „order: -3; „, dann rückt sie z.B. drei Positionen nach links.

Mit align-self kannst du einzelne Elemente innerhalb einer Flexbox ausrichten. Dabei nimmt sie die gleichen Werte wie align-items.

Mit flex-wrap kannst du festlegen, ob alle Flex-Items in eine Zeile sollen oder sie umbrechen dürfen (Werte: nowrap, wrap, wrap-reverse).

Mit flex-flow kannst du die Eigenschaften von flex-direction und flex-wrap zusammen in einer kürzeren Schreibweise deklarieren:

flex-flow: column wrap;

Hier findest du ein einfaches Flexbox-Beispiel mit HTML und CSS bei Codepen.


Dir gefällt dieser Beitrag? Dann würde ich mich sehr darüber freuen, wenn du ihn teilen oder du einen Kommentar hinterlassen würdest. Vielen Dank! :)


Lade mich auf einen Kaffee ein

Für diesen Artikel und den Aufbau der Website ist jede Menge Kaffee geflossen. Wenn dir die Infos geholfen haben, freue ich mich jederzeit über neuen Treibstoff. Mit dem Klick auf den Button wirst du zu PayPal weitergeleitet. Dankeschön!

☕ Kaffee spendieren
Sebastian Würfel Avatar

Über mich

Seit über zehn Jahren nutze ich WordPress und schreibe auf verschiedenen Blogs. Als Spezialist für Content Marketing und SEO arbeite ich neben meiner Selbstständigkeit seit einiger Zeit für die NETZhelfer GmbH. Dort helfe ich verschiedenen Kunden als Website Booster. Auf meiner persönlichen Website berichte ich über meine Learnings.


Verpasse keine neuen Beiträge

Vielen Dank für den Support :) Und keine Sorge, ich spamme nicht. Natürlich ist eine Abmeldung vom Newsletter jederzeit möglich. Die Eintragung umfasst die Hinweise zu Widerruf, Versanddienstleister und Statistik gemäß der Datenschutzerklärung.


Schreibe einen Kommentar