CSS-Flexbox-Generator
Erstelle einen Flex-Container und seine Elemente visuell, kopiere dann das CSS, die Tailwind-Klassen oder den Inline-Stil.
CSS-Flexbox-Generator
Lege flex-direction, flex-wrap, justify-content, align-items und align-content mit Dropdown-Menüs fest, füge einen Abstand in beliebigen Einheiten hinzu, und dieses Werkzeug schreibt die Flex-Container-Regel für dich — zusammen mit einer passenden Regel für ihre Elemente und einer kleinen Textvorschau, die zeigt, wie die Felder angeordnet sind. Nutze es, um eine Navigationsleiste, eine Kartenreihe, eine Formular-Symbolleiste oder jedes Layout zu entwerfen, das Elemente benötigt, die verteilt, zentriert oder umbrochen werden, ohne ein vollständiges Grid zu brauchen.
Die Element-Einstellungen wenden flex-grow, flex-shrink und flex-basis gleichmäßig auf die Anzahl der Elemente an, die du wählst — genau wie bei echten Flex-Reihen: eine Element-Klasse, die mehrere Felder steuert, anstelle von einzelnen Werten pro Feld. Align-content erscheint nur in der Ausgabe, wenn flex-wrap auf wrap oder wrap-reverse gesetzt ist, weil Browser es sonst ignorieren — das Werkzeug gibt niemals eine Deklaration aus, die nichts bewirkt.
Wähle das Ausgabeformat, das zu deinem Arbeitsfluss passt: reines CSS für ein Stylesheet, Tailwind-Utility-Klassen (Klammern für beliebige Werte decken Abstände und Grundgrößen ab, die nicht auf der Standard-Spacing-Skala liegen), oder ein Inline-Style-Attribut für einen schnellen Prototyp oder Email-sichere Markup. Jeder Wert wird aktualisiert, sobald du eine Option änderst, und die Layout-Vorschau wird mit ihm neugezeichnet — kein Build-Schritt, keine externe CSS zum Laden.
Alles läuft lokal in deinem Browser; nichts, das du hier konfigurierst, wird woanders versendet. Wenn das CSS richtig aussieht, kopiere es, lade es als .txt-Datei herunter, oder sende es zurück in die Eingabe, um mit einem anderen Werkzeug weiterzumachen.