CSS Flexbox Generator
Erstellen Sie fertige CSS-Flexbox-Deklarationen für Container mit Einstellungen für Richtung, Ausrichtung, Umbruch und Elementabstand.
Tool ausführen
Mit diesem Flexbox-Generator erstellen Sie saubere CSS-Regeln für moderne Web-Layouts direkt im Browser. Sie bestimmen die wesentlichen Flexbox-Eigenschaften für Ihren Container: die Ausrichtung der Hauptachse über die Richtung, die Verteilung der Elemente entlang der Hauptachse, die Ausrichtung auf der Querachse sowie das Umbruchverhalten bei Platzmangel. Zusätzlich legen Sie einen festen Pixelabstand zwischen den einzelnen Kindelementen fest. Das Werkzeug setzt die eingegebenen Werte direkt in vollständige Deklarationen für die CSS-Eigenschaften flex-direction, justify-content, align-items, flex-wrap und gap zusammen. Das Ergebnis enthält zusätzlich die Angabe display: flex für den übergeordneten Container. Falls Sie einzelne Felder leer lassen, greift das Werkzeug auf Standardwerte zurück: Die Richtung startet als waagerecht, Inhalte und Querachse zentrieren sich standardmäßig, der Umbruch bleibt deaktiviert und der Abstand beträgt zehn Pixel. Den erzeugten CSS-Code kopieren Sie anschließend direkt in Ihr Stylesheet oder passen ihn für responsive Gestaltungsraster weiter an.
Anleitung
- Wählen Sie die gewünschte Hauptachsen-Richtung (z. B. waagerecht oder senkrecht) für den Flexbox-Container.
- Geben Sie die Werte für die horizontale und vertikale Ausrichtung (Verteilung und Querachsen-Ausrichtung) an.
- Legen Sie fest, ob Kindelemente bei Platzmangel umbrechen sollen (Umbruchverhalten).
- Tragen Sie den gewünschten Abstand zwischen den Elementen als Zahl für den Pixelwert ein.
- Starten Sie die Erstellung und kopieren Sie das generierte CSS-Snippet in Ihre Stylesheet-Datei.
Beispiele
- Zentrierte Navigationsleiste in einer Zeile mit 20 Pixeln Abstand: Richtung = waagerecht, Verteilung = gleichmäßig verteilt, Querachsen-Ausrichtung = zentriert, Umbruch = nicht umbrechen, Abstand = 20.
- Mehrspaltiges Kartengitter mit Umbruch: Richtung = waagerecht, Verteilung = am Anfang, Querachsen-Ausrichtung = gestreckt, Umbruch = umbrechen, Abstand = 16.
- Vertikales Formular-Layout mit zentrierten Feldern: Richtung = senkrecht, Verteilung = am Anfang, Querachsen-Ausrichtung = zentriert, Umbruch = nicht umbrechen, Abstand = 12.
FAQ
Welche Standardwerte verwendet das Werkzeug, wenn Felder frei bleiben?
Wenn Sie keine Werte angeben, nutzt der Generator waagerecht für die Richtung, zentriert für Haupt- und Querachse, nicht umbrechen für den Umbruch und 10 für den Pixelabstand.
In welcher Einheit wird der Abstandswert ausgegeben?
Die eingegebene Zahl im Abstandsfeld wird im erzeugten CSS automatisch mit der Einheit px formatiert, beispielsweise als gap: 15px;.
Muss display: flex separat ergänzt werden?
Nein, das generierte Code-Snippet enthält die Deklaration display: flex bereits standardmäßig in der ersten Zeile.
Wie binde ich den erzeugten Code in mein Projekt ein?
Kopieren Sie den Textblock aus dem Ausgabefeld und fügen Sie ihn in den Selektor der übergeordneten Container-Klasse Ihrer CSS-Datei ein.