CSS-Flexbox-Übungsbereich
Interaktiver Übungsbereich zum Erlernen und Erzeugen von Flexbox-Layouts
Layouteinstellungen
Layoutvorlagen
Individuelle Einstellungen pro Element
Wählen Sie ein Element in der Vorschau oder Liste aus, um seine Eigenschaften zu bearbeiten.
Flexbox-Kurzreferenz
Hauptachse
justify-content steuert die Ausrichtung entlang der Hauptachse (durch flex-direction bestimmt).
Querachse
align-items steuert die Ausrichtung entlang der Querachse (senkrecht zu flex-direction).
Mehrzeilig
align-content gilt nur, wenn flex-wrap auf wrap oder wrap-reverse gesetzt ist und mehrere Zeilen vorhanden sind.
Live-Vorschau
Generiertes CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}Ändern Sie die Einstellungen oder wählen Sie ein Element aus. Vorschau und CSS werden gemeinsam aktualisiert.
Über den CSS-Flexbox-Übungsbereich
Der CSS-Flexbox-Übungsbereich ist ein visuelles, interaktives Tool zum Lernen und Experimentieren mit CSS-Flexbox-Layouts. Flexbox (Flexible Box Layout) ist eines der leistungsfähigsten und am häufigsten genutzten CSS-Layoutmodule und dient dazu, Elemente in einem Container flexibel und responsiv anzuordnen. Mit diesem Tool verändern Sie jede Eigenschaft von Flex-Container und Flex-Elementen in Echtzeit und sehen genau, wie sich Ihr Layout verändert.
Hauptfunktionen
- Volle Kontrolle über alle Flex-Container-Eigenschaften: flex-direction, flex-wrap, justify-content, align-items, align-content und gap
- Überschreibungen pro Element: order, flex-grow, flex-shrink, flex-basis und align-self
- Visuelle Live-Vorschau mit farbigen, nummerierten Elementen und gestrichelter Containerbegrenzung
- Layout-Vorlagen wie Navigationsleiste, Kartenraster, Holy Grail, zentrierter Inhalt und Seitenleisten-Layout
- Automatisch erzeugter CSS-Code mit Kopierfunktion per Klick
- Dynamische Steuerung der Elementanzahl von 1 bis 12 Elementen
- Elemente per Klick auswählen und ihre Eigenschaften einzeln bearbeiten
- Unterstützung des Dunkelmodus für angenehmes Arbeiten bei jedem Licht
Flexbox-Eigenschaften verstehen
Flexbox arbeitet mit zwei Achsen: der Hauptachse (festgelegt durch flex-direction) und der Querachse (senkrecht zur Hauptachse). Die Eigenschaft justify-content verteilt den Platz entlang der Hauptachse, align-items regelt die Ausrichtung auf der Querachse. Erlaubt flex-wrap den Umbruch auf mehrere Zeilen, steuert align-content den Abstand zwischen diesen Zeilen. Jedes Flex-Element kann seine Ausrichtung mit align-self überschreiben, seine Wachstums- und Schrumpfungsverhältnisse steuern und mit flex-basis eine Grundgröße festlegen.
Gängige Flexbox-Layoutmuster
Flexbox eignet sich hervorragend für Navigationsleisten, das horizontale und vertikale Zentrieren von Inhalten, responsive Kartenraster mit Umbruch, Seitenleisten-Layouts mit fester Seitenleiste und flexiblem Hauptinhalt sowie das klassische Holy-Grail-Layout mit Kopfzeile, Fußzeile, Seitenleiste und Hauptbereich. Mit den Vorlagenschaltflächen sehen Sie diese Muster sofort in Aktion.
Für wen ist dieses Tool gedacht?
- Webentwickler, die zum ersten Mal CSS Flexbox lernen
- Frontend-Entwickler, die schnell responsive Layouts als Prototyp bauen
- UI-/UX-Designer, die Flex-Layouts vor dem Schreiben von Code visualisieren möchten
- Studierende, die CSS-Layouttechniken für Kurse oder Vorstellungsgespräche lernen
- Lehrende, die Flexbox-Konzepte in Workshops oder im Unterricht vorführen
- Alle, die schnell Flexbox-CSS für ihre Projekte erzeugen müssen