CSS-Flexbox-Spickzettel
Kompakte Referenz für CSS-Flexbox mit Container- und Item-Eigenschaften, Standardwerten sowie fertigen Codebeispielen für typische Layouts.
Tool ausführen
Diese Referenz fasst alle grundlegenden Eigenschaften und Werte von CSS-Flexbox übersichtlich zusammen. Sie unterstützt Webentwickler und Designer beim schnellen Nachschlagen von Regeln für Flex-Container und Flex-Items. Für Container finden Sie Angaben zu Anzeigemodi, Hauptachsenrichtung, Zeilenumbruch, Ausrichtung auf der Haupt- und Querachse sowie Abständen über die Eigenschaft gap mit Beispielen wie 16px oder 1rem. Für untergeordnete Elemente listet die Übersicht Eigenschaften für Wachstumsfaktoren, Schrumpfverhalten, Basisgrößen, die zusammenfassende flex-Notation, individuelle Ausrichtungen und die Reihenfolge auf. Enthaltene Standardwerte wie die Zeilenrichtung, fehlender Zeilenumbruch, startbündige Verteilung oder das Dehnen von Elementen erleichtern das Verständnis des Ausgangszustands. Zusätzlich liefert die Referenz bewährte CSS-Muster für häufige Anwendungsfälle: das Zentrieren von Inhalten, Navigationsleisten, umbrechende Kartenlayouts, Seitenleisten, fixierte Fußzeilen am Seitenende und gleichmäßig verteilte Spalten. Die gezeigten Codeausschnitte lassen sich direkt in Ihre Stylesheets übernehmen und für eigene responsive Designs anpassen.
Anleitung
- Öffnen Sie die Referenzübersicht, um alle bereitgestellten Flexbox-Eigenschaften einzusehen.
- Wählen Sie zwischen Container- und Item-Eigenschaften, um gezielt Angaben zu Ausrichtung, Umbruch oder Größenverhalten nachzuschlagen.
- Prüfen Sie die angegebenen Standardwerte und Syntaxbeispiele für Eigenschaften wie gap, justify-content oder align-items.
- Kopieren Sie bei Bedarf die vorbereiteten CSS-Vorlagen für typische Layoutmuster wie Navigationen oder zentrierte Bereiche in Ihr Stylesheet.
Beispiele
- Zentrieren von Inhalten: display: flex; justify-content: center; align-items: center; min-height: 100vh;
- Umbrechendes Kartenraster: display: flex; flex-wrap: wrap; gap: 1rem;
FAQ
Welche Standardwerte gelten für Flex-Container?
Standardmäßig ist die Ausrichtung auf Zeilenrichtung (row) gesetzt, Zeilenumbrüche sind deaktiviert (nowrap), Elemente richten sich am Start der Hauptachse aus und dehnen sich entlang der Querachse.
Wie unterscheiden sich Flex-Container von Flex-Items?
Container-Eigenschaften bestimmen das übergeordnete Verhalten des Rasters wie Flussrichtung, Umbrüche und Gesamtausrichtung. Item-Eigenschaften steuern das individuelle Wachstums-, Schrumpf- und Ausrichtungsverhalten einzelner Kindelemente.
Enthält die Übersicht fertige Codebeispiele für Standardlayouts?
Ja, in der Übersicht finden Sie fertige CSS-Snippets für horizontales und vertikales Zentrieren, Navigationsleisten, umbrechende Kartenlayouts, Seitenleisten, fixierte Fußzeilen und gleich breite Spalten.
Bietet das Werkzeug eine visuelle Live-Vorschau im Browser?
Nein, die Referenz zeigt nur die Texte und CSS-Codeausschnitte an. Eine visuelle Live-Vorschau oder Layoutvalidierung im Browser ist nicht enthalten.