CSS-Flexbox-Generator und Playground
Ändern Sie Einstellungen und beobachten Sie die Anordnung der Elemente. Übernehmen Sie die Containerregeln in Ihr Stylesheet.
Läuft lokal in deinem Browser · display: flex · alignment · gap
Ändern Sie Einstellungen und beobachten Sie die Anordnung der Elemente. Übernehmen Sie die Containerregeln in Ihr Stylesheet.
Läuft lokal in deinem BrowserDas Werkzeug schreibt genau eine Regel für den Container: display: flex plus flex-direction, flex-wrap, justify-content, align-items, align-content und gap. Die Bühne zeigt nummerierte Kästen, damit Sie das Zusammenspiel der Regler sehen, bevor die Regel in Ihr Stylesheet wandert.
Einen Ausführen-Knopf gibt es nicht: Vorschau und Codebereich folgen jeder Änderung. CSS kopieren legt genau diesen Text in die Zwischenablage, und Zurücksetzen stellt den Ladenzustand wieder her: row, wrap, flex-start, stretch, stretch, 16 px, 6 Elemente.
flex-direction legt Hauptachse und Reihenfolge der Kästen fest; flex-wrap lässt Elemente auf neue Zeilen rutschen; justify-content verteilt den freien Platz auf der Hauptachse, weshalb der Effekt am deutlichsten sichtbar ist, solange die Zeile nicht vollständig gefüllt ist.
align-items richtet die Elemente innerhalb ihrer Zeile aus, align-content verteilt die Zeilen selbst. align-content bewegt nur dann etwas, wenn der Container wirklich auf mehr als eine Zeile umbricht: bei nowrap oder einer einzigen Zeile verschiebt sich nichts, obwohl die Deklaration weiterhin im CSS steht.
Die Bühne zeichnet so viele nummerierte Kästen, wie die Elementanzahl verlangt, und übernimmt dieselben Werte wie das CSS. Der Hinweis neben dem Titel benennt Haupt- und Querachse und dreht die Pfeile, sobald Sie eine Spaltenrichtung wählen.
Die Elementanzahl betrifft nur die Vorschau — sie ist nicht Teil der exportierten Regel. Solange align-items auf stretch steht, füllen die Kästen die Containerhöhe; wählen Sie eine andere Ausrichtung oder einen festen Abstand, wenn Sie die Zeilen vergleichen möchten.
Der erzeugte Code enthält genau einen Block: .flex-container mit display: flex und den sechs Deklarationen in der gezeigten Reihenfolge. Es gibt keine Regeln pro Element, keine Herstellerpräfixe und keine Media Queries — anzupassen sind nur Klassenname und Werte.
Das Werkzeug läuft im Browser: Werte und Auswahl verlassen die Seite nicht. CSS kopieren schreibt denselben Text in die Zwischenablage und die Statuszeile bestätigt es, was auch praktisch ist, um die Regel für ein Projekt vorzubereiten, bevor sie im Stylesheet landet.