Skip to main content

Flexbox-Spielplatz

CSS-Flexbox-Layouts visuell erstellen mit Live-Vorschau und kopierfähiger CSS-Ausgabe.

Geprüft von · Zuletzt geprüft

Container

8px

Items (3)

Preview

1
2
3
CSS
.container {
  display: flex;
  gap: 8px;
}

Den Flexbox-Spielplatz verwenden

  1. Lege die Container-Achse über das flex-direction-Dropdown fest. Row legt Elemente von links nach rechts auf der Hauptachse an, Column stapelt sie vertikal, die -reverse-Varianten kehren die Reihenfolge um.
  2. Verteile den Platz entlang der Hauptachse mit justify-content: flex-start, center, space-between, space-around, space-evenly.
  3. Richte entlang der Kreuzachse aus mit align-items. Baseline-Ausrichtung ist die, die Entwickler am wenigsten verwenden - sie sperrt Textbaselines über Elemente unterschiedlicher Höhe.
  4. Entscheide das Wrap-Verhalten mit flex-wrap und setze den gap-Wert. Verwende + Element hinzufügen, um bis zu 10 Kinder hinzuzufügen und jeweils flex-grow, flex-shrink, flex-basis, align-self und order anzupassen.
  5. Klicke CSS kopieren, um die vollständige Container-Regel und nur die überschriebenen Element-Regeln zu erfassen (das Werkzeug lässt Standardwerte weg, um die Ausgabe sauber zu halten).

Was die Layout-Engine tut

CSS Flexible Box Layout Module Level 1 (W3C Candidate Recommendation 2018, seit 2017 in jedem ausgelieferten Browser stabil) definiert einen Zwei-Durchlauf-Algorithmus. Im ersten Durchlauf sammelt die Engine die Elemente, misst ihre hypothetische flex-basis und berechnet den positiven oder negativen Freiraum im Container. Im zweiten Durchlauf verteilt sie diesen Freiraum gemäß dem flex-grow jedes Elements (Anteil des positiven Freiraums) oder flex-shrink (gewichtetes Schrumpfen, wenn Elemente überlaufen), positioniert dann die resultierenden Boxen entlang der Hauptachse mit der gewählten justify-content-Regel und streckt sie über die Kreuzachse mit align-items. Der Spielplatz schreibt diese Werte direkt in Inline-Styles auf einem Live-Vorschau-div, ohne Framework-Vermittlung, sodass was du siehst, genau das ist, was ein Browser mit demselben CSS in deinem Projekt tun würde.

Wann Flexbox die richtige Wahl ist

  • Eindimensionale Layouts: eine Reihe von Nav-Links, eine Spalte von Formularfeldern, eine Toolbar von Schaltflächen. Wenn das Layout "eine Linie von Dingen" ist, ist Flexbox die Standardwahl.
  • Ein einzelnes Kind zentrieren vertikal und horizontal mit display: flex; place-items: center. Das jahrzehntelange Zentrierproblem ist mit einer Deklaration gelöst.
  • Eine bekannte Anzahl von Elementen mit unbekannten Breiten über eine bekannte Containerbreite verteilen (Navigationsleisten, Tag-Chips).
  • Eine Footer-Aktion nach rechts schieben mit margin-left: auto auf dem geschobenen Kind.
  • Heterogenen Inhalt baseline-ausrichten, zum Beispiel ein Produktkartentitel und ein kleinerer Preis daneben, damit ihre Buchstaben eine visuelle Linie teilen.

Häufige Fallen

Die Flex-Kurzschreibweise ist die erste. flex: 1 expandiert zu flex: 1 1 0%, was die Basis auf null setzt und intrinsische Breiten unerwartet kollabieren kann; verwende flex: 1 1 auto, wenn du "wachsen zum Füllen, aber Inhaltsgröße respektieren" möchtest. Zweites, min-width: auto: Flex-Elemente haben ein implizites Minimum gleich ihrem Inhalt-min-content, sodass ein flex: 1-Kind mit einer langen nicht umbrechbaren URL das Layout sprengt - setze min-width: 0 auf das Kind. Drittes, Baseline-Ausrichtung mit Bildern: die Baseline eines Inline-Block-Bildes ist sein Box-Boden, was gegenüber Text-Baselines falsch ausrichtet; verpacke es oder wechsle zu align-items: center. Viertes, order und Zugänglichkeit: Tab-Reihenfolge folgt DOM-Reihenfolge, nicht visueller Reihenfolge, sodass das Neuanordnen von Elementen mit order die Tastaturnavigation bricht. Fünftes, Prozent-gap innerhalb von Flex-Containern wird immer zu Pixeln aufgelöst, unabhängig von der Syntax.

Wo Flexbox in der Spezifikationslandschaft lebt

Die CSS-Layout-Geschichte umfasst jetzt vier große Systeme: Flexbox (Level 1, eindimensional), Grid (CSS Grid Layout Level 1, zweidimensional mit expliziten Tracks), Mehrspaltenlayout (Legacy, für zeitungsartigen fließenden Text) und die neue Container-Queries- und Subgrid-Schicht, die in CSS Grid Layout Level 2 und CSS Containment Module Level 3 hinzugefügt wurde. Flexbox und Grid überschneiden sich in der Praxis: Grid kann eindimensionale Layouts mit grid-auto-flow: column machen, Flexbox kann pseudo-zweidimensional mit Wrap plus ausgerichteten Zeilen sein. Die ehrliche Regel ist, dass Flexbox bei inhaltsgetriebener Größengebung glänzt, wenn dir die Ausrichtung von Elementen über Zeilen hinweg egal ist, während Grid bei expliziten Track-Größen und Zeilen-und-Spalten-Ausrichtung glänzt. Der Spielplatz zielt auf den Flexbox-Sweet-Spot: Komponenten und kleine Layout-Primitive statt ganze-Seite-Raster.

Vergleich mit Grid, Frameworks und manuellem Kodieren

Ein Utility-Framework wie Tailwind kann das meiste davon durch Verketten von Klassen abkürzen (flex items-center justify-between gap-4) - für Live-Bearbeitung dieser Utilities Ende-zu-Ende sieh dir den dedizierten Tailwind-Spielplatz an. Chrome DevTools hat seit 2020 einen erstklassigen Flexbox-Inspector, der es erlaubt, dieselben Eigenschaften live auf jeder Seite anzupassen - wohl ein besseres Werkzeug zum Debuggen eines bestehenden Layouts als zum Aufbauen eines neuen. Der Spielplatz gewinnt, wenn du ein Layout entwerfen möchtest, ohne eine echte Seite darum herum zu haben, oder wenn du die Eigenschaftsinteraktionen durch Isolierung erlernen möchtest. Für reines Lernen lehren die klassischen Flexbox-Froggy- und Flexbox-Defense-Spiele die benannten Werte durch Rätsel statt durch Eigenschaftseditoren - andere Pädagogik, dasselbe Vokabular.

Häufig gestellte Fragen

Wann sollte ich Flexbox statt Grid verwenden?

Greife zu Flexbox, wenn dein Layout eine einzelne Zeile oder Spalte von Elementen ist, deren Größen durch ihren Inhalt bestimmt werden sollen. Greife zu Grid, wenn du Dinge gleichzeitig auf zwei Achsen ausrichten musst oder explizite Track-Größen benötigst, die manche Elemente überspannen und andere nicht. Ein gängiges Muster ist Grid für die Seitenhülle (Header, Seitenleiste, Main, Footer) und Flexbox innerhalb jeder Region für kleinere Komponentenlayouts.

Warum kollabiert manchmal mein Inhalt durch flex: 1?

Weil <code>flex: 1</code> zu <code>flex: 1 1 0%</code> expandiert - Basis null vor dem Wachsen. Für Elemente mit intrinsischem Inhalt verwende <code>flex: 1 1 auto</code>, um mit der gemessenen Größe zu beginnen. Wenn das Kind immer noch kollabiert, füge <code>min-width: 0</code> hinzu, um die Standard-min-width: auto-Regel zu überwinden.

Woran richtet sich align-items: baseline tatsächlich aus?

An der ersten Baseline jedes Flex-Elements. Bei Text ist das die Baseline der Buchstaben; bei Elementen mit einem nicht-Text-Erstling (Bild, Block-Element) fällt die Baseline auf den unteren Rand des Elements zurück, weshalb eine Baseline-Reihe mit gemischtem Text und Symbolen falsch ausgerichtet aussieht. Verpacke solche Elemente oder wechsle zu <code>align-items: center</code>.

Warum wird mein gap-Wert ignoriert?

Höchstwahrscheinlich ist der Browser einer der wenigen, die <code>gap</code> in Flexbox-Containern noch nicht unterstützen - gap wurde für Flexbox später hinzugefügt als für Grid, und Safari hat es erst in Version 14.1 geliefert. Wenn du ältere Safari-Unterstützung benötigst, weiche auf negative Margins auf dem Container und positive Margins auf Elementen aus, aber für jeden Browser ab 2021 aufwärts funktioniert gap problemlos.

Bricht order die Tastaturzugänglichkeit?

Ja, auf subtile Weise. Die Tab-Reihenfolge folgt immer der DOM-Reihenfolge, sodass wenn du <code>order: -1</code> verwendest, um eine Aktionsschaltfläche visuell an den Anfang einer Flex-Reihe zu verschieben, ein Tastaturbenutzer in ihrer ursprünglichen DOM-Position auf sie tabbt, was sich für ihn zufällig anfühlt. Die zugängliche Lösung ist, die DOM-Reihenfolge umzuordnen, nicht das CSS. Reserviere <code>order</code> für Fälle, wo der visuelle Tausch kosmetisch ist (zum Beispiel ein Kartenpaar auf Mobil umkehren) und die zugrundeliegende Lesereihenfolge in beide Richtungen funktioniert.

Kann ich Flexbox für das gesamte Seiten-Layout verwenden?

Technisch ja, praktisch ist Grid für zweidimensionale Seitenhüllen meist die bessere Wahl. Flexbox für Seiten-Layout erfordert verschachtelte Container (eine Reihe mit zwei Spalten, von denen jede selbst ein Spalten- Flex-Container ist), was funktioniert, aber die Absicht verdeckt. Grid drückt "Header, Seitenleiste, Main, Footer" in einer einzigen Vorlage im Elternelement aus, wofür du dein zukünftiges Ich danken wirst, wenn du in sechs Monaten zurückkommst.

Warum erstellt flex-wrap Elemente mit gleicher Höhe pro Zeile?

Jede umgebrochene Zeile ist ihr eigener Kreuzachsen-Kontext, und Elemente strecken sich standardmäßig bis zum höchsten in dieser Zeile. Setze <code>align-items: flex-start</code> auf dem Container, um das abzuwählen, oder verwende Grid, wenn du elementindividuelle Größen möchtest.

Was ist der Unterschied zwischen space-around und space-evenly?

Beide verteilen Elemente mit gleichem Abstand zwischen ihnen, behandeln aber die Ränder unterschiedlich. <code>space-around</code> gibt jedem Element einen halb so großen Abstand davor und danach, sodass die äußeren Abstände halb so groß sind wie die inneren. <code>space-evenly</code> gibt jedem Abstand - einschließlich der zwei an den Enden - genau die gleiche Größe. Für eine Reihe von drei Elementen in einem 600px-Container mit 300px Freiraum verteilt space-around als 50, 100, 100, 50 und space-evenly als 75, 75, 75, 75.

Erfordert dieses Werkzeug JavaScript zur Laufzeit in der Produktion?

Nein. Der Spielplatz selbst verwendet JavaScript, um die Live-Vorschau beim Ziehen von Steuerelementen zu aktualisieren, aber das CSS, das du heraus kopierst, ist rein deklaratives Flexbox und läuft mit null Laufzeit- Kosten auf der verwendenden Seite. Deine Produktionsseite kann vollständig JavaScript-deaktiviert sein und das exportierte CSS verhält sich identisch zu dem, was du im Spielplatz gesehen hast.

Wie bezieht sich Flexbox auf WCAG?

Flexbox selbst hat keine direkten Zugänglichkeitsimplikationen - es ist eine paint-level Layout-Engine, und unterstützende Technologie geht durch den DOM. Die indirekten Anliegen sind SC 1.3.2 (Sinnvolle Abfolge), das erfordert, dass die visuelle Reihenfolge der Lesereihenfolge entspricht, und SC 2.4.3 (Fokusreihenfolge), das erfordert, dass der Tastaturfokus in einer Reihenfolge fortschreitet, die die Bedeutung bewahrt. Beide werden verletzt, wenn du <code>order</code> oder <code>flex-direction: row-reverse</code> verwendest, um Layouts zu erstellen, bei denen visuelle Reihenfolge nicht der DOM-Reihenfolge entspricht, ohne den Benutzer zu berücksichtigen, der per Tab navigiert.

Wird irgendeine meiner Spielplatz-Eingaben gespeichert?

Der Live-Zustand wird in Preact-Hooks auf deinem Gerät gehalten. Der Spielplatz speichert nicht in localStorage und sendet die Konfiguration nicht an einen Server. Wenn du die Seite aktualisierst, verlierst du dein aktuelles Layout, also kopiere das CSS, sobald du damit zufrieden bist.

Verwandte Tools

Mehr CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool
ZeroUtil unterstützen