So nutzt du: CSS Flexbox Generator
- Wähle eine Vorlage — Zentrierung, Navbar, umbrechende Karten, Seitenleiste, Stapel — oder starte von vorn.
- Stelle den Container ein: flex-direction, flex-wrap, justify-content (Hauptachse), align-items (Querachse) und gap.
- Klicke auf ein Element, um seine flex-grow, shrink, basis, order und align-self zu setzen; nutze + Add item oder Remove, um die Anzahl zu ändern.
- Ändere die Größe des Containers, um es zu testen, und kopiere dann die CSS-, HTML- oder Tailwind-Klassen.
Die zwei Achsen von Flexbox
Flexbox ordnet Elemente entlang einer Hauptachse (festgelegt durch flex-direction) und einer Querachse im rechten Winkel dazu an. justify-content verteilt die Elemente entlang der Hauptachse; align-items richtet sie auf der Querachse aus. Wechselst du zu column, tauschen die beiden ihre Rollen — deshalb braucht „vertikal zentrieren“ manchmal justify-content und manchmal align-items.
flex: grow shrink basis
| Kurzschreibweise | Bedeutung | Verwenden für |
|---|---|---|
flex: 1 | 1 1 0% | Gleich breite Spalten, die sich den Platz teilen |
flex: auto | 1 1 auto | Wachsen anhand der eigenen Inhaltsgröße |
flex: none | 0 0 auto | Feste Elemente wie ein Logo oder Icon |
flex: 1 1 240px | Start bei 240px, dann wachsen oder schrumpfen | Umbrechende Kartenraster |
margin-left: auto auf einem Element schiebt es — und alles danach — an das Ende, der klassische Weg, einen „Anmelden“-Button in einer Navbar nach rechts zu setzen. Für zweidimensionale Layouts mit Zeilen und Spalten passt der CSS Grid Generator besser.
Auch gesucht als: flexbox generator, flexbox playground, flexbox layout erstellen, justify-content erklärt, align-items css, flex layout beispiele, tailwind flex klassen, css flexbox tutorial.
Passende Tools zu: CSS Flexbox Generator
- Border-Radius Generator — Runde die Ecken beliebiger Boxen ab: Zieh einen Regler für alle Ecken oder stell jede Ecke einzeln ein, wechsle zu elliptischen Ecken für Blob- und Blattformen und kopiere das kürzeste gültige border-radius-CSS.
- Box-Shadow-Generator — Stapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Ausbreitung und Deckkraft auf einer Live-Karte an und kopiere das CSS für box-shadow oder text-shadow.
- CSS zu Tailwind Converter — Füge CSS-Regeln oder Deklarationen ein und erhalte für jeden Selektor die passenden Tailwind-Utility-Klassen, inklusive hover:-Zuständen und beliebigen Werten wie p-[13px].
- Klemmenrechner — Gib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen clamp() Wert mit einer Erklärung der Berechnung, einer Live-Vorschau und einer vollständigen Skalierung für flüssige Schriftgrößen oder Abstände.
Häufige Fragen
Wie zentriere ich ein div mit Flexbox?
Im übergeordneten Element: display: flex; justify-content: center; align-items: center; und eine Höhe festlegen. Wähle die Vorlage „Alles zentrieren“, um es zu sehen.
Was ist der Unterschied zwischen justify-content und align-items?
justify-content positioniert Elemente entlang der Hauptachse (in einer Zeile horizontal), align-items entlang der Querachse (in einer Zeile vertikal). Bei flex-direction: column tauschen sie die Rollen.
Warum brechen meine Flex-Elemente nicht um?
flex-wrap steht standardmäßig auf nowrap, daher schrumpfen die Elemente, um in eine Zeile zu passen. Setze flex-wrap: wrap und gib den Elementen eine flex-basis oder min-width, damit sie eine Größe haben, bei der sie umbrechen können.
Flexbox oder Grid?
Flexbox für jeweils eine Richtung — Navbars, Toolbars, Zentrierung, Reihen von Karten. Grid, wenn Zeilen und Spalten exakt ausgerichtet sein müssen, etwa bei Seitenlayouts und Dashboards.
Kann ich CSS Flexbox Generator als Web-App installieren und offline nutzen?
Ja. CSS Flexbox Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.