Flexbox-Generator

Experimentieren Sie mit der Biegerichtung, dem Umwickeln, Ausrichten und Ausrichten. Sehen Sie zu, wie die Artikellayouts live aktualisiert werden, und kopieren Sie dann das Container-CSS.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

Experimentieren Sie mit Biegerichtung, Umbruch, Ausrichtung und Ausrichtung – sehen Sie, wie die Layouts live aktualisiert werden.
Läuft in Ihrem Browser
Kostenlose Nutzung

Anleitung

Legen Sie die Flexrichtung fest und wickeln Sie es ein.
Justify-content und align-items anpassen.
Kopieren Sie das Flexbox-CSS.

How this tool works

Legen Sie die Flexrichtung fest und wickeln Sie es ein.
Justify-content und align-items anpassen.
Kopieren Sie das Flexbox-CSS.

Recommended settings

Verwenden Sie zunächst die Standardoptionen und passen Sie sie dann bei Bedarf an

Supported formats

Text / on-page input

File size and limits

Sehr komplexe mehrschichtige Vorschauen wirken sich auf älteren Telefonen möglicherweise langsamer aus.

Privacy

Farb- und CSS-Generatoren laufen vollständig in Ihrem Browser. Vorschauen und Konvertierungen laden Ihre Stile niemals hoch.

Common use cases

Verwenden Sie den Flexbox-Generator, wann immer Sie ihn brauchen: Experimentieren Sie mit der Biegerichtung, dem Umbruch, der Ausrichtung und der Ausrichtung – sehen Sie, wie die Layouts live aktualisiert werden.

Troubleshooting

Die Vorschau sieht nach dem Einfügen anders aus

Überprüfen Sie Ihre Seite auf konkurrierendes CSS (Zurücksetzungen, geerbte Farben). Kopieren Sie die generierte Regel zunächst in ein isoliertes Stylesheet.

FAQ

Lädt dies mein CSS hoch?

Nein. Generatoren und Konverter laufen in Ihrem Browser mit Live-Vorschau.

Brauche ich ein Konto?

Nein. Öffnen Sie das Tool, passen Sie die Steuerelemente an und kopieren Sie das CSS.

Flexbox-Generator