Flexbox-Editor
Kostenloser Online-Flexbox-Layout-Editor, visuelle Echtzeit-Vorschau
Flexbox-Eigenschaften-Referenz
flex-direction: row | column | row-reverse | column-reverse. justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly. align-items: stretch | flex-start | center | flex-end | baseline. flex-wrap: nowrap | wrap. gap: Abstand zwischen Elementen.
Den Flexbox-Editor verwenden
Passen Sie die Flex-Container-Eigenschaften ueber die Steuerung an. Die Vorschau zeigt in Echtzeit, wie Elemente angeordnet werden. Fuegen Sie Elemente hinzu oder entfernen Sie diese, um verschiedene Konfigurationen zu testen. Kopieren Sie das generierte CSS fuer Ihr Projekt.
▶Was ist der Unterschied zwischen justify-content und align-items?
justify-content steuert die Ausrichtung entlang der Hauptachse (horizontal bei row, vertikal bei column). align-items steuert die Ausrichtung entlang der Querachse (senkrecht zur Hauptachse).
▶Wie zentriere ich ein Element mit Flexbox?
Setzen Sie das Elternelement auf display: flex; justify-content: center; align-items: center; Dies zentriert das Kindelement sowohl horizontal als auch vertikal.
▶Was bewirkt flex-wrap?
Standardmaessig versuchen Flex-Elemente, in eine Zeile zu passen (nowrap). Mit flex-wrap: wrap koennen Elemente in die naechste Zeile umfliessen, wenn der Platz nicht ausreicht.