Flexbox-Playground
Flexbox visuell ausprobieren: direction, wrap, justify-content, align-items und gap live einstellen – mit CSS und Tailwind.
Der Flexbox-Playground zeigt live, wie flex-direction, flex-wrap, justify-content, align-items, align-content und gap ein Layout verändern. Du klickst einzelne Elemente an und stellst flex-grow, flex-shrink, flex-basis, align-self und order ein. Ergebnis ist fertiger CSS-Code sowie Tailwind-Klassen für Container und Elemente.
Element 1
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}Wie funktioniert Flexbox?
Flexbox ordnet Elemente entlang einer Hauptachse an. Mit display: flex wird ein Element
zum Flex-Container, seine Kinder zu Flex-Items. Der Container steuert Richtung, Umbruch, Ausrichtung
und Abstand, die Items ihr Wachstum und ihre Größe.
Die wichtigsten Eigenschaften
| Eigenschaft | Wirkung |
|---|---|
flex-direction | Richtung der Hauptachse |
flex-wrap | Ob Items in neue Zeilen umbrechen |
justify-content | Verteilung entlang der Hauptachse |
align-items | Ausrichtung quer zur Hauptachse |
gap | Abstand zwischen den Items |
flex (Item) | Wachsen, Schrumpfen und Basisgröße |
So gehst du vor
- Container-Eigenschaften einstellen und die Anordnung beobachten.
- Einzelne Items anklicken und ihre flex-Werte ändern.
- Code kopieren. Für zweidimensionale Layouts nimmst du den CSS-Grid-Generator.
Beispiel
Eine Navigationsleiste mit Logo links und Links rechts baust du mit justify-content: space-between und align-items: center. Der Abstand kommt aus gap, passende Werte
liefert der Spacing-Skala-Generator.
Häufige Fragen
Was ist der Unterschied zwischen justify-content und align-items?
justify-content richtet die Elemente entlang der Hauptachse aus, bei flex-direction: row also horizontal. align-items richtet sie quer dazu aus, also vertikal. Bei column tauschen die Achsen.
Wann wirkt align-content?
Nur bei mehrzeiligen Containern, also mit flex-wrap: wrap. Es verteilt die Zeilen im Container, während align-items die Elemente innerhalb einer Zeile ausrichtet.
Was bedeutet flex: 1?
Kurzform für flex-grow: 1, flex-shrink: 1 und flex-basis: 0. Das Element wächst und teilt sich den freien Platz gleichmäßig mit den anderen. In Tailwind ist das flex-1.
Wie ändere ich die Reihenfolge der Elemente?
Mit order. Kleinere Werte stehen weiter vorne, der Standard ist 0. Bedenke, dass sich nur die visuelle Reihenfolge ändert, nicht die Reihenfolge für Screenreader und Tastatur.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.