Wie zentriere ich ein div mit Flexbox mit diesem Tool?

Wählen Sie die Voreinstellung Perfekt zentriert, die justify-content: center und align-items: center auf den Container setzt. Drücken Sie dann CSS kopieren und fügen Sie es in Ihr Stylesheet ein.

Welche Flexbox-Eigenschaften kann ich ändern?

Sie können flex-direction, flex-wrap, justify-content, align-items, align-content und Abstand einstellen. Sie können auch die Anzahl der Elemente von 1 bis 10 und die Vorschau-Höhe ändern.

Wie sehe ich, wie flex-grow auf ein Element wirkt?

Klicken Sie in der Live-Vorschau auf ein Element, um flex-grow: 1 darauf anzuwenden, und klicken Sie erneut, um es zu entfernen. Das generierte CSS enthält dann eine .item:nth-child-Regel für dieses Element.

Gibt es Startvoreinstellungen, wie eine Navigationsleiste oder Kartenreihe?

Ja. Voreinstellungen sind Navigationsleiste, Perfekt zentriert, Seitenleisten-Layout und Umbrechende Kartenreihe. Jede lädt einen Satz von Werten, die Sie anschließend anpassen können.

Warum scheint align-content in der Vorschau nichts zu bewirken?

align-content wirkt sich nur aus, wenn Elemente auf mehrere Zeilen umbrechen. In der Vorschau wird es nur angewendet, wenn wrap nicht nowrap ist, also setze flex-wrap zuerst auf wrap.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

↔️

CSS-Flexbox-Generator – kostenlos

Experimentieren Sie mit Flex-Richtung, Umbruch, Ausrichtung und Verteilung an Live-Elementen — und kopieren Sie das CSS.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

Ein visueller Flexbox-Spielplatz: Stellen Sie Richtung, Umbruch, justify-content, align-items und Abstand ein, ändern Sie die Anzahl der Elemente und klicken Sie ein Element an, um ihm flex-grow zu geben. Das CSS wird live aktualisiert und ist zum Kopieren bereit.

Voreinstellungen

flex-direction

flex-wrap

justify-content

align-items

Abstand: 12pxElemente: 4Vorschau-Höhe: 176px

Tipp: Klicken Sie ein Element in der Vorschau an, um flex-grow: 1 umzuschalten.

Live-Vorschau

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Alles läuft in Ihrem Browser — nichts wird hochgeladen.

So funktioniert es

Ein interaktiver Flexbox-Spielplatz: Schalten Sie flex-direction, wrap, justify-content und align-items um und sehen Sie, wie sich bis zu 10 Live-Elemente sofort neu anordnen. Klicken Sie auf ein Element, um ihm flex-grow: 1 zu geben und zu sehen, wie es Platz beansprucht. Das CSS aktualisiert sich live und ist bereit zum Kopieren in Ihr Projekt.

1
Container einstellen
Richtung, Umbruch, justify-content, align-items, gap.
2
Elemente hinzufügen
Ein bis zehn nummerierte Flex-Elemente.
3
Experimentieren
Klicken Sie auf ein Element, um flex-grow umzuschalten und die Wirkung zu sehen.
4
CSS kopieren
Die Regeln für Container (und Element), bereit zum Einfügen.

Alles läuft in Ihrem Browser – nichts wird hochgeladen.

CSS-Flexbox-Generator – kostenlos

So funktioniert es

Ähnliche Tools

CSS-Grid-Generator

CSS-Verlaufsgenerator

CSS-Box-Shadow-Generator

Häufige Fragen