display:flex

Hauptachse festlegenflex-directionrow (d), row-reverse, column, column-reverse
Items auf Hauptachse anordnenjustify-contentflex-start (d), flex-end, center, space-between, space-around, space-evenly
Items auf Querachse andordnen
(Space/Verteilung: gleich)
align-itemsflex-start, flex-end, center, baseline, stretch (d)
Items auf Querarchse spacenalign-contentflex-start, flex-end, center, space-between, space-around, space-evenly, stretch (d)
Umbruch auf Hauptachseflex-wrapnowrap (d), wrap, wrap-reverse
Zelle(n) auf Querachse anordnen (anstatt Hauptachse)align-selfflex-start, flex-end, center, baseline, stretch
Hauptachse + Umbruch dortflex-flowflex-direction flex-wrap
Startgröße einer Zelleflex-basisGröße, auto
Anteilsmäßige Veränderungflex-grow
flex-shrink
0-1
Reihenfolge der Items ändernorderAnzahl Positionen links (-) oder rechts

https://flexboxfroggy.com