Visualisieren Sie Flex-Container und -Elemente, um klar zu sehen, wie sich untergeordnete Elemente innerhalb des Flex-Containers positionieren
Passen Sie Flexbox-Eigenschaften an, um verschiedene Ausrichtungs- und Verteilungseffekte zu beobachten
Richtung der Flex-Elemente
Querausrichtung der Elemente
Hauptachsen-Ausrichtung und -Verteilung
Ob Elemente in neue Zeilen umbrechen
Querausrichtung der umgebrochenen Zeilen
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretchFlex-Container mit Elementen verschiedener Größen zur Demonstration von Flexbox-Ausrichtungseffekten
row - Elemente fließen horizontal (links nach rechts)row-reverse - Elemente fließen horizontal (rechts nach links)column - Elemente fließen vertikal (oben nach unten)column-reverse - Elemente fließen vertikal (unten nach oben)nowrap - Elemente bleiben in einer Zeilewrap - Elemente brechen bei Bedarf in neue Zeilen umwrap-reverse - Elemente brechen in umgekehrter Reihenfolge in neue Zeilen umflex-start - Elemente am Anfang der Querachse ausrichtencenter - Elemente auf der Querachse zentrierenflex-end - Elemente am Ende der Querachse ausrichtenstretch - Elemente strecken, um die Querachse zu füllenbaseline - Elemente entlang ihrer Grundlinie ausrichtenflex-start - Elemente am Anfang der Hauptachse packencenter - Elemente auf der Hauptachse zentrierenflex-end - Elemente am Ende der Hauptachse packenspace-* - Raum zwischen Elementen verteilen