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.