Entwickler / CSS-Layout

Flexbox-Spielplatz: CSS-Steuerung für Container und Elemente

Teste Flex-Richtung, Umbruch, Verteilung, Ausrichtung und Abstände. Passe anschließend Wachstum, Schrumpfen, Basis, Reihenfolge und Ausrichtung jedes Elements an. Sieh dir die Layoutänderung an und kopiere das CSS.

Flexbox-Spielplatz: CSS-Steuerung für Container und Elemente: Zeigt einen Live-Flex-Container mit bearbeitbaren Eigenschaften der Elemente und einer kurzen Erklärung neben jeder Einstellung. Die Vorschau hat eine feste Höhe, damit Effekte auf der Querachse sichtbar werden. Rasterlayouts mit gemeinsamen Zeilen und Spalten findest du im CSS-Grid-Generator. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
Flexbox-Layout-ÜbersichtLokale Verarbeitung

Läuft vollständig in deinem Browser

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Verwende Flexbox für eine Zeile oder Spalte. Verwende CSS Grid, wenn Zeilen und Spalten gemeinsame Rasterbahnen benötigen. CSS-Grid-Generator öffnen

Ausgewähltes Element 1

Flex-Layout-Modell

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . Freier Platz wird entlang der Hauptachse anhand der Wachstums- und Schrumpfgewichte von Flexbox verteilt.

Ausrichtung und Barrierefreiheit

MDN-Grundkonzepte von Flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . Die Querachse steht senkrecht zur Hauptachse; eine visuelle Neuanordnung ändert nicht die Reihenfolge im Dokument.

So benutzt du es

  1. Lege Richtung, Umbruch und Ausrichtung des Containers fest.
  2. Klicke auf ein Element und ändere seine individuelle Größe und Ausrichtung.
  3. Füge Elemente hinzu oder entferne sie, überprüfe das Layout und kopiere das generierte CSS.

Datenschutz & Einschränkungen

Layouteinstellungen werden lokal in deinem Browser verarbeitet.

Ähnliche Tools

CSS GridClip-PathCSS-Formatierer

Häufige Fragen

Warum bewirkt align-content manchmal nichts?

Die Eigenschaft verteilt Flex-Zeilen. Damit sie sichtbar wirkt, brauchst du einen Umbruch, mehrere Zeilen und freien Platz auf der Querachse.

Ändert order die Reihenfolge für Screenreader?

Nein. Die Eigenschaft ändert die visuelle Reihenfolge, während Reihenfolge beim Lesen des Dokuments und bei der Tastaturnavigation unverändert bleiben. Behalte eine logische Dokumentreihenfolge bei.

Wann sollte ich stattdessen Grid verwenden?

Verwende Grid, wenn Zeilen und Spalten gemeinsame Tracks nutzen sollen. Flexbox eignet sich, wenn Elemente hauptsächlich entlang einer Achse angeordnet werden.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig