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.
