Flexbox-Editor

Was ist ein visueller Flexbox-Editor?#

Flexbox ist die CSS-Layout-Engine zum Anordnen von Elementen entlang einer einzigen Richtung (einer Zeile oder Spalte) und zum Verteilen des freien Raums dazwischen. Sie beantwortet Fragen, für die früher Floats, negative Margen und Probieren nötig waren: „Wie zentriere ich das vertikal?“, „Wie mache ich diese drei Spalten gleich hoch?“, „Wie schiebe ich ein Element ganz nach rechts, während der Rest links bleibt?“. Hat man es verstanden, greift man auf fast jeder Seite danach; vorher stolpern selbst erfahrene Entwickler über die Eigenschaftsnamen (justify-content, align-items, flex-grow), weil die Spezifikation gewöhnliche englische Wörter mit sehr präziser Layout-Bedeutung überlädt.

Diese Seite ist ein Live-Flexbox-Playground. Sie stellen die Container-Eigenschaften und die Überschreibungen pro Element in der linken Seitenleiste ein; die rechte Fläche zeigt das Ergebnis sofort und schreibt die exakte, kopier-fertige CSS-Regel aus, die es erzeugt hat. Der Punkt ist, aufzuhören zu raten, welcher Wert was bewirkt, und stattdessen die Wirkung im Moment der Änderung zu sehen — dann die Regel kopieren, die funktioniert hat.

Verwendung#

Das Layout ist in eine Seitenleiste mit Steuerungen und ein Vorschau- + CSS-Ausgabe-Panel geteilt.

1. Container einstellen. Verwenden Sie die Dropdowns in der Seitenleiste:
   • Richtung — row, row-reverse, column, column-reverse.
   • Justify Content — verteilt den freien Raum entlang der Hauptachse: flex-start, center, flex-end, space-between, space-around, space-evenly.
   • Align Items — ordnet die Kinder entlang der Querachse: stretch, flex-start, center, flex-end, baseline.
   • Wrap — nowrap hält alles in einer Zeile; wrap und wrap-reverse lassen Kinder in neue Zeilen fließen.
   • Align Content — erscheint nur, wenn Wrap aktiv ist; es staffelt die Zeilen der umgebrochenen Kinder.
   • Abstand — ein Regler von 0 bis 64 px; der Live-Wert wird neben dem Label angezeigt.
2. Elemente verwalten. Unter der Überschrift Elemente fügt Element hinzufügen ein weiteres Flex-Kind ein. Jede Element-Zeile legt Grow, Shrink, Basis, Reihenfolge und Align Self frei (eine Überschreibung des Container-align-items pro Kind). Löschen Sie ein Kind mit seiner Löschen-Schaltfläche.
3. Vorschau beobachten. Die große Box rechts ist ein echter Flex-Container — jede Änderung wird sofort neu gezeichnet.
4. CSS kopieren. Der erzeugte Regel-Block steht unter der Vorschau. Klicken Sie auf Kopieren, um ihn zu übernehmen. Wenn alle Elemente dieselben Werte haben, wird ein einzelner .item-Block ausgegeben; sobald ein Element abweicht, schaltet die Ausgabe auf einen .item:nth-child(N)-Block pro Kind um, damit jede Überschreibung eindeutig bleibt.

Hauptfunktionen#

• Container- und Pro-Kind-Eigenschaften an einem Ort. Nichts an Flexbox ist versteckt — flex-direction, beide Ausrichtungsachsen, Wrap, gap und Pro-Element grow/shrink/basis/Reihenfolge/align-self sind alle live.
• Korrekte, minimale CSS-Ausgabe. align-content wird nur ausgegeben, wenn Wrap tatsächlich aktiv ist (es bewirkt nichts in einer einzelnen Zeile); gleiche Elemente kollabieren zu einem Block; order und align-self erscheinen nur, wenn sie vom Standard abweichen. Die Ausgabe ist die kürzeste Regel, die das reproduziert, was Sie sehen.
• Die flex-Kurzform, richtig gemacht. Jedes Kind serialisiert als flex: <grow> <shrink> <basis> — die kanonische Drei-Werte-Form, die die überraschenden Defaults der fehlenden Kurzform-Werte vermeidet.
• Basis wird validiert. Tippen Sie auto, 0, 200px, 50% oder 10rem und sie wird akzeptiert; eine ungültige Basis wird markiert und fällt auf auto zurück, statt stillschweigend kaputtes CSS zu erzeugen.
• Vorschau erzwingt links-nach-rechts. Flexbox’ row ist als Links-nach-rechts-Semantik definiert, daher ist die Vorschau unabhängig von der Seitensprache auf LTR fixiert — was Sie sehen, stimmt mit dem überein, was Ihr Stylesheet tun wird.

Ausführliches Beispiel#

Ein gängiges Layout: eine Kopfzeile mit einem links fixierten Logo, einem Titel, der den restlichen Raum einnimmt, und einer rechts fixierten Aktion — gleichmäßig verteilt mit festem Abstand.

• Richtung: row
• Justify Content: space-between
• Align Items: center
• Wrap: nowrap
• Abstand: 16px
• Elemente: drei Kinder, das mittlere mit Grow 1, damit es den freien Raum aufsaugt, die anderen beim Standard flex: 0 1 auto.

Das erzeugte CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

Weil das zweite Kind wächst und die anderen nicht, verwendet die Ausgabe korrekt drei separate nth-child-Blöcke. Setzen Sie das in ein beliebiges Projekt ein und das Logo schmiegt sich an die linke Kante, die Aktion an die rechte, und der Titel füllt die Mitte — keine Floats, keine Margins.

FAQ#

justify-content vs align-items — welches ist welches?#

justify-content arbeitet immer entlang der Hauptachse (der Richtung, die flex-direction setzt — horizontal bei row, vertikal bei column). align-items arbeitet immer entlang der Querachse (senkrecht zur Hauptachse). Also steuert in einer row justify-content den links/rechts-Abstand und align-items die oben/unten-Ausrichtung. Drehen Sie die Richtung auf column und sie tauschen die Rollen. Sich „justify = Hauptachse, align = Querachse“ zu merken, erspart Ihnen die häufigste Flexbox-Verwirrung.

Wann bewirkt flex-grow überhaupt etwas?#

Nur wenn freier Raum zum Aufsaugen da ist. Wenn drei Kinder je flex-grow: 1 haben und der Container breiter ist, als die Kinder brauchen, wird der Restraum gedrittelt und gleichmäßig hinzugefügt. Ist der Container exakt voll, wächst nichts. Setzen Sie flex-grow: 0 (den Standard) und ein Kind weigert sich zu wachsen und lässt seine Geschwister den Raum nehmen. flex-shrink ist das Spiegelbild: Es entscheidet, wer bei Platzmangel zuerst Raum abgibt.

Warum zeigt mein gap keine Wirkung?#

Drei übliche Ursachen: Die Kinder haben eine feste Breite, die den Container komplett füllt (kein Raum für Abstände), flex-wrap: nowrap zwingt Kinder zum Überlaufen statt in das gap-bewusste Layout umzubrechen, oder eine Margin auf den Kindern überdeckt den Abstand visuell. Der Regler hier geht bis 64 px; wenn Sie mehr brauchen, akzeptiert die zugrunde liegende Eigenschaft jede Länge, also kopieren Sie das CSS und erhöhen Sie gap in Ihrer eigenen Datei.

Die Ausgabe verwendet nth-child — kann ich stattdessen eine Klasse verwenden?#

Natürlich. Die Selektoren .item:nth-child(N) werden ausgegeben, weil sie bei abweichenden Elementen eindeutig zur Vorschau passen. In echtem Code tauschen Sie sie gegen Ihre eigenen Klassen (.logo, .title, .action) — die Deklarationen darin bleiben identisch. Wenn jedes Kind übereinstimmt, gibt das Werkzeug bereits einen einzigen gemeinsamen .item-Block aus, den Sie an einer Stelle umbenennen können.