Tokenlabor

Flexbox-Generator mit Vorschau

Flexbox-Generator: flex-direction, flex-wrap, justify-content, align-items und gap auswählen, die Wirkung live sehen und das CSS kopieren.

Vorschau
CSS-Code

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

CSS Flexbox auf einen Blick

Der Flexbox-Generator zeigt, was die Eigenschaften von CSS Flexbox bewirken, und schreibt den Code dazu. Sie stellen die Werte per Auswahl ein und sehen in der Vorschau sofort, wie sich die Elemente verteilen. Das ist hilfreich, wenn man sich bei justify-content und align-items nicht sicher ist, welche Achse gerade gemeint ist.

Flexbox ordnet Elemente entlang einer Hauptachse an. flex-direction legt sie fest: row ist waagerecht, column senkrecht. justify-content verteilt die Elemente entlang der Hauptachse, zum Beispiel mit space-between an die Ränder und mit gleichem Abstand dazwischen. align-items richtet sie auf der Querachse aus, also bei row in der Höhe. Mit flex-wrap: wrap brechen Elemente in eine neue Zeile um, wenn der Platz nicht reicht; erst dann wirkt auch align-content, das die Zeilen untereinander verteilt.

Für Abstände ist gap einfacher als Außenabstände an jedem Element, weil am Rand kein überzähliger Abstand entsteht. Grenzen: Flexbox ist für eine Richtung gedacht, etwa Navigationsleisten, Werkzeugleisten oder Kartenreihen. Für Layouts mit Zeilen und Spalten zugleich ist CSS Grid meist die bessere Wahl, dafür gibt es den CSS-Grid-Generator.

Anleitung: Flexbox-Generator in 4 Schritten

  1. Legen Sie mit flex-direction die Hauptachse fest und mit flex-wrap, ob Elemente umbrechen.
  2. Wählen Sie justify-content für die Verteilung auf der Hauptachse und align-items für die Ausrichtung auf der Querachse.
  3. Stellen Sie gap, die Anzahl der Elemente und bei Bedarf „flex: 1“ oder unterschiedliche Größen für die Vorschau ein.
  4. Prüfen Sie die Wirkung in der Vorschau und kopieren Sie den CSS-Code.

Typische Anwendungsfälle

  • Navigationsleiste bauen: Menüpunkte mit space-between oder gap gleichmäßig in einer Zeile verteilen.
  • Kartenreihen umbrechen: Mit flex-wrap und gap eine Reihe von Karten erzeugen, die auf schmalen Bildschirmen umbricht.
  • Inhalte zentrieren: Ein Element mit justify-content und align-items waagerecht und senkrecht mittig setzen.
Fragen

Häufige Fragen

Was ist der Unterschied zwischen justify-content und align-items?

justify-content verteilt die Elemente entlang der Hauptachse, align-items richtet sie quer dazu aus. Bei flex-direction: row ist die Hauptachse waagerecht, bei column senkrecht; dann tauschen die beiden Eigenschaften scheinbar ihre Wirkung.

Wie zentriere ich ein Element mit Flexbox?

Geben Sie dem Elternelement display: flex; justify-content: center; align-items: center; Das Kind steht dann waagerecht und senkrecht in der Mitte. Senkrecht wirkt das nur, wenn das Elternelement höher ist als das Kind.

Warum hat align-content keine Wirkung?

align-content verteilt mehrere Zeilen. Bei flex-wrap: nowrap gibt es nur eine Zeile, dann ändert die Eigenschaft nichts. Der Generator lässt sie in diesem Fall deshalb weg.

Was bedeutet flex: 1?

Es ist die Kurzform für flex-grow: 1, flex-shrink: 1 und flex-basis: 0%. Alle Elemente mit flex: 1 teilen sich den freien Platz gleichmäßig, unabhängig von ihrem Inhalt.

Wie richte ich ein Element mit Flexbox rechts aus?

Für alle Elemente setzen Sie justify-content: flex-end am Container. Soll nur das letzte Element nach rechts, geben Sie ihm margin-left: auto; es schiebt sich dann an den rechten Rand, die übrigen bleiben links.

Warum bricht mein Flex-Container nicht um?

Der Standardwert von flex-wrap ist nowrap, deshalb schrumpfen die Elemente lieber, als umzubrechen. Stellen Sie flex-wrap auf wrap; im Generator sehen Sie sofort, wie die Elemente in eine neue Zeile wandern.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

CSS-Grid-Generator

Spalten, Zeilen und Abstände für CSS Grid festlegen, Vorschau prüfen und CSS kopieren.

Öffnen