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.

Schreibe einen Kommentar

20 − 6 =

*