Was ist CSS Flexbox?
CSS Flexbox (Flexible Box Layout) ist ein eindimensionales Layout-Modell zur Verteilung von Platz und Ausrichtung von Elementen in einer Zeile oder Spalte. Der Flex-Container wird mit display: flex definiert, und seine direkten Kinder werden zu Flex-Elementen. Wichtige Container-Eigenschaften: flex-direction (Zeile oder Spalte), flex-wrap (einzeilig vs. mehrzeilig), justify-content (Ausrichtung entlang der Hauptachse), align-items (Ausrichtung entlang der Querachse je Zeile) und align-content (Querachsen-Ausrichtung mehrerer Zeilen). Wichtige Element-Eigenschaften: flex-grow (wie stark ein Element wächst), flex-shrink (wie stark es schrumpft), flex-basis (Ausgangsgröße) und align-self (überschreibt align-items des Containers für ein bestimmtes Element). Flexbox eignet sich ideal für Navigationsleisten, Kartenreihen, zentrierte Layouts und jede eindimensionale Anordnung.
So verwenden Sie den CSS Flexbox Generator
-
Passen Sie die Container-Eigenschaften (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) mithilfe der Dropdowns und des Eingabefeldes an.
-
Klicken Sie auf ein beliebiges Element in der Vorschau, um es auszuwählen (wird orange).
-
Legen Sie flex-grow, flex-shrink, flex-basis und align-self des ausgewählten Elements im Element-Panel fest.
-
Klicken Sie auf '+ Element hinzufügen', um weitere Elemente hinzuzufügen; klicken Sie auf 'Entfernen', um das ausgewählte Element zu löschen.
-
Wechseln Sie zwischen CSS- und HTML-Registerkarten, um den generierten Code zu sehen, und klicken Sie dann auf Kopieren.
-
Klicken Sie auf 'Alles zurücksetzen', um mit dem Standard-3-Element-Layout neu zu beginnen.