CSS-Flexbox-Generator
Ändere die Eigenschaften von Container und Elementen und sieh sofort, wie sie angeordnet werden. So verstehst du Flexbox am schnellsten, ohne blind Code zu schreiben: Gefällt dir das Ergebnis, kopierst du nur das CSS, das du geändert hast.
Zu 100 % in deinem Browser verarbeitet
Klicke in der Vorschau auf ein Element, um es zu bearbeiten.
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Stelle Richtung, Umbruch, Verteilung und Ausrichtung des Containers ein.
- 2Wähle, wie viele Elemente in der Vorschau erscheinen.
- 3Klicke ein Element an, um grow, shrink, basis, align-self und Reihenfolge zu ändern.
- 4Kopiere das erzeugte CSS.
Anwendungsfälle
- Ein Element horizontal und vertikal zentrieren.
- Eine Navigationsleiste mit gleichmäßig verteilten Links bauen.
- Eine Kartenreihe erstellen, die auf kleinen Bildschirmen umbricht.
- Den Unterschied zwischen justify-content und align-items lernen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen justify-content und align-items?
justify-content verteilt die Elemente entlang der Hauptachse (standardmäßig die Zeile), align-items richtet sie auf der Querachse aus. Wechselst du die Richtung auf column, tauschen die Achsen.
Wie zentriere ich ein Element mit Flexbox?
Nutze am Container justify-content: center und align-items: center. Der Container braucht eine Höhe, damit die vertikale Zentrierung sichtbar wird.
Was bedeutet flex: 1 1 auto?
Es sind grow, shrink und basis: wie stark das Element wachsen darf, wie stark es schrumpfen darf und seine Ausgangsgröße, bevor der restliche Platz verteilt wird.
Wann nutze ich Flexbox und wann Grid?
Flexbox eignet sich, um Elemente in einer Dimension anzuordnen, als Zeile oder Spalte. Für Raster aus Zeilen und Spalten zugleich nimmst du CSS Grid.