Alle häufigen Flexbox-Eigenschaften, gruppiert nach dem Ort der Anwendung: der Container und das Element. Jede Zeile verbindet die Eigenschaft mit ihren üblichen Werten und ihrer Wirkung.
Flexbox ordnet Elemente in einer Dimension an: in einer Zeile oder einer Spalte. Mit display: flex auf dem Elternelement wird dieses zum Flex-Container; seine direkten Kinder werden zu Flex-Elementen. Die Container-Eigenschaften steuern die Verteilung entlang der Hauptachse und der Querachse; die Element-Eigenschaften steuern, wie ein einzelnes Element wächst, schrumpft oder sich ausrichtet. Flexbox eignet sich für eindimensionale Leisten, Zeilen und Zentrierung.
Nachschlagetabelle · 13 Einträge
CSS FlexboxExplained
13 of 13 rows
Container
flex | inline-flex
Macht das Element zum Flex-Container.
row | column | row-reverse | column-reverse
Legt die Hauptachse fest, entlang der die Elemente fließen.
flex-start | center | space-between | space-around | space-evenly
Verteilt die Elemente entlang der Hauptachse.
stretch | center | flex-start | flex-end | baseline
Richtet die Elemente entlang der Querachse aus.
flex-start | center | stretch | space-between
Richtet umbrochene Zeilen aus, wenn es zusätzlichen Platz auf der Querachse gibt.
nowrap | wrap | wrap-reverse
Lässt Elemente in neue Zeilen umbrechen, statt sie zu verkleinern.
0.5rem | 8px 16px
Abstand zwischen den Elementen, horizontal und vertikal.
Element
0 | 1 | 2
Wie viel freien Raum das Element im Verhältnis zu seinen Geschwistern aufnimmt.
0 | 1
Wie stark das Element schrumpft, wenn der Platz nicht reicht.
auto | 200px | 50%
Die Ausgangsgröße, bevor der freie Raum verteilt wird.
1 | 1 0 auto | 0 0 200px
Kurzform für grow shrink basis.
auto | center | flex-start | flex-end | stretch
Überschreibt align-items des Containers für ein einzelnes Element.
0 | -1 | 2
Ordnet ein Element neu an, ohne die Quellreihenfolge zu ändern.