CSS Flexbox-Generator

Der Flexbox-Generator lässt Sie einen Flex-Container visuell aufbauen – display, direction, wrap, justification, alignment und gap – und dabei eine Live-Vorschau mit 3 bis 12 nummerierten Elementen beobachten. Anschließend können Sie einzelne Elemente überschreiben und sauberes CSS für den Container und jedes geänderte Element kopieren.

Wie Haupt- und Querachse funktionieren

Jede Flexbox-Entscheidung bezieht sich auf zwei Achsen. flex-direction legt die Hauptachse fest, und justify-content verteilt die Elemente entlang dieser Achse. align-items und align-content wirken auf die Querachse, die senkrecht dazu steht. Deshalb scheint flex-direction: column die beiden Ausrichtungseigenschaften zu vertauschen: Die Hauptachse ist nun vertikal, also steuert justify-content die vertikale Platzierung und align-items die horizontale.

Eigenschaft	Achse	Wirkung
justify-content	Haupt	Abstand und Position entlang der Reihe oder Spalte
align-items	Quer	einzeilige Ausrichtung jedes Elements
align-content	Quer	Abstand zwischen umbrochenen Zeilen (braucht wrap)
gap	beide	fester Raum zwischen Elementen und Zeilen

Praxisbeispiel: Eine Navbar mit space-between

Ein häufiger Header hat links ein Logo und rechts eine Linkgruppe, beide vertikal zentriert. Wählen Sie:

• display: flex
• justify-content: space-between
• align-items: center

Das generierte CSS lautet:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

flex-direction, flex-wrap, align-content und gap fehlen, weil sie auf ihren Standardwerten stehen und nichts ändern würden. Fügen Sie einen Abstand von 16 Pixeln hinzu, wächst die Ausgabe um eine Zeile gap: 16px;.

Praxisbeispiel: Proportionale Elementgrößen

Wählen Sie Element 2 in der Vorschau und setzen Sie flex-grow auf 2, dann Element 1 und setzen Sie es auf 1. Bei einem Container von 600 Pixeln ohne gap und einer Inhaltsbreite von etwa 100 Pixeln pro Element beträgt der übrige Platz 600 − 300 = 300 Pixel. Er wird im Verhältnis der grow-Faktoren aufgeteilt: Element 1 erhält ein Drittel (100 px) und Element 2 zwei Drittel (200 px), ihre endgültigen Breiten liegen also bei ungefähr 200 px und 300 px.

Die Ausgabe erzeugt nur für die geänderten Elemente eine Regel:

.item-1 {
  flex-grow: 1;
}

.item-2 {
  flex-grow: 2;
}

flex-shrink und align-self bleiben weg, weil sie auf ihren Standardwerten belassen wurden.

Warum einige Eigenschaften in der Ausgabe fehlen

Der Generator lässt Eigenschaften weg, die den CSS-Standardwerten entsprechen, der kopierte Block enthält also nur das, was das Layout tatsächlich verändert. display wird immer geschrieben; flex-direction: row, flex-wrap: nowrap, justify-content: flex-start, align-items: stretch, align-content: stretch, ein gap von null, flex-grow: 0, flex-shrink: 1 und align-self: auto werden weggelassen. Ein kurzer Block ist daher ein Merkmal und kein Zeichen dafür, dass eine Einstellung verloren ging.

Wann Flexbox passt und wie man es verschachtelt

Flexbox verteilt Elemente entlang einer einzigen Achse und eignet sich hervorragend für Komponenten: Navbars, Button-Gruppen, Karten in einer Reihe, Formularzeilen und das Zentrieren eines einzelnen Kindes. Es ist die falsche erste Wahl für ein vollständiges zweidimensionales Seitenraster mit Zeilen und Spalten, die übereinander ausgerichtet sind – dafür ist CSS Grid zuständig. Eine praktische Regel: Wenn Sie Elemente in eine Richtung anordnen und sie umbrechen lassen, greifen Sie zu Flexbox; wenn Zeilen und Spalten gleichzeitig fluchten müssen, greifen Sie zu Grid. Flexbox richtet Elemente innerhalb einer Zeile aus, Grid richtet Spuren über den ganzen Container aus; das Vermischen dieser Denkmodelle ist die Quelle der meisten Momente des Typs „Warum zentriert das nicht?“.

Über die Demo hinaus: Verschachtelung und echte Layouts

Die Vorschau zeigt einen Container, doch echte Seiten verschachteln mehrere. Ein häufiges Muster ist eine Flex-Reihe für die Seitenhülle, bei der jede Spalte selbst eine Flex-Spalte ist. Bauen Sie den äußeren Container mit display: flex und Sidebar und Hauptbereich als Elemente, dann bauen Sie die innere Spalte mit display: flex; flex-direction: column. Der generierte .container-Block gilt für das Element, das diese Klasse trägt, Sie können ihn also in mehr als ein verschachteltes Element einfügen und die Selektoren anpassen.

Elemente auf die volle Höhe bringen

Eine häufige Frage ist, warum Elemente nicht auf die Höhe des höchsten Geschwisters gestreckt werden. Standardmäßig bewirkt align-items: stretch genau das auf der Querachse. Wirken die Elemente zu kurz, hat ein Kind im Inneren möglicherweise eine feste Höhe oder der Container hat keine Höhe zum Verteilen. Eine explizite Höhe am Container oder align-self: stretch an einem einzelnen Element löst das meist. Soll ein Element kurz bleiben, während seine Geschwister strecken, wählen Sie es aus und setzen align-self auf flex-start, statt den ganzen Container zu ändern.

Häufige Fehler

• align-content bei einer einzelnen Zeile verwenden. Ohne Umbruch tut es nichts. Fügen Sie flex-wrap: wrap hinzu und verkleinern Sie die Vorschau, um es wirken zu sehen.
• Vergessen, dass flex-grow nur übrigen Platz verteilt. Füllen die Elemente den Container bereits, kann ein höherer flex-grow-Wert keinen Raum schaffen; Sie brauchen einen größeren Container oder kleinere Elemente.
• flex-shrink: 0 auf alles setzen. Es verhindert das Quetschen von Elementen, kann Inhalte aber stattdessen über den Containerrand schieben und horizontalen Überlauf verursachen.
• Erwarten, dass die Klassen zu Ihrem Markup passen. Die Ausgabe verwendet .container und .item-N; benennen Sie sie vor dem Einfügen in Ihre echten Selektoren um.
• Annehmen, dass gap die Ränder auffüllt. gap fügt nur Raum zwischen Elementen hinzu; es schafft keinen äußeren Freiraum. Nutzen Sie dafür padding am Container.

Verwandte Tools

• CSS Box-Shadow-Generator — Mehrschichtige Boxschatten mit Live-Vorschau gestalten.
• CSS Gradient-Generator — Eigene CSS-Verläufe für Ihre Layouts erstellen.
• Farbpaletten-Generator — Harmonische Farbpaletten für Ihr Design generieren.