CSS-Flexbox-Eigenschaften mit dem Spickzettel nachschlagen

Wofür der Flexbox-Spickzettel geeignet ist

Der Flexbox-Spickzettel dient als Nachschlagewerk für CSS Flexbox. Sie finden darin Eigenschaften für Flex-Container und Flex-Elemente, die jeweils aufgeführten Werte, Beschreibungen und CSS-Beispiele. Das ist hilfreich, wenn Sie eine Anordnung planen, eine unbekannte Eigenschaft einordnen oder ein passendes Layout-Muster als Ausgangspunkt suchen.

Die Inhalte decken unter anderem die Richtung der Hauptachse, Umbrüche, Ausrichtung, Abstände sowie das Wachsen und Schrumpfen von Flex-Elementen ab. Die Beispielmuster reichen vom Zentrieren von Inhalten über Navigationsleisten und Kartenraster bis zu Seitenleisten, Sticky-Footern und gleich breiten Spalten.

Flexbox-Eigenschaften nachschlagen und übernehmen

1. Öffnen Sie den Flexbox-Spickzettel und ordnen Sie Ihre Frage zunächst einem Flex-Container oder einem Flex-Element zu, je nachdem, was Sie anpassen möchten.

2. Suchen Sie bei einem Container nach der passenden Aufgabe: Legen Sie etwa die Hauptachsenrichtung fest, aktivieren Sie den Umbruch, richten Sie Inhalte auf der Haupt- oder Querachse aus oder prüfen Sie die verfügbaren Abstände. Für einzelne Elemente stehen unter anderem Wachstum, Schrumpfen, Ausgangsbasis, Kurzschreibweise, individuelle Ausrichtung und Reihenfolge zur Verfügung.

3. Lesen Sie bei der ausgewählten Eigenschaft die aufgeführten Werte und die zugehörige Beschreibung. Vergleichen Sie die Angaben mit dem Layout-Ziel, bevor Sie sie in Ihr Stylesheet übernehmen.

4. Nutzen Sie ein Beispiel als Ausgangspunkt, wenn Ihr Fall einem der angebotenen Muster entspricht. Für den Abstand gap nennt der Spickzettel beispielsweise Längenwerte wie 16px und 1rem.

5. Übertragen Sie die benötigte Eigenschaft in Ihre CSS-Regel und prüfen Sie die Darstellung anschließend in Ihrem eigenen Projekt. Der Spickzettel liefert Referenzmaterial und CSS-Beispiele; er führt keine eigene Layout-Vorschau aus.

Was die Referenz liefert

Das Ergebnis ist als Referenz aufgebaut: Es verbindet Flexbox-Eigenschaften mit ihren gelisteten Werten, kurzen Erklärungen und passenden CSS-Mustern. Die Angaben helfen dabei, eine Regel auszuwählen und die Syntax eines Beispiels als Ausgangspunkt zu verwenden. Sie erhalten jedoch keine berechnete Layout-Ausgabe für Ihr konkretes HTML und CSS. Ob Abstände, Größen und Ausrichtung im eigenen Projekt wie gewünscht wirken, muss deshalb dort geprüft werden.

Beachten Sie außerdem die angegebenen Standardwerte, wenn Sie eine Regel ohne weitere Anpassung beurteilen. Dazu gehören unter anderem row für die Richtung, kein Umbruch, eine Startausrichtung bei der Verteilung auf der Hauptachse, stretch für die Ausrichtung von Elementen, kein Wachstum, ein Schrumpfwert von eins, automatische individuelle Ausrichtung und die Reihenfolge null. Ein solcher Ausgangspunkt erklärt, warum ein Layout bereits eine bestimmte Anordnung zeigt, bevor zusätzliche Werte gesetzt werden.

Praktisches Beispiel

Sie möchten mehrere Karten in einer Flexbox-Zeile anordnen und bei geringer Breite in weitere Zeilen umbrechen lassen.

Für eine Reihe von Produktkarten wählen Sie das Muster für ein umbrechendes Kartenlayout, prüfen die Container-Einstellungen und übernehmen anschließend nur die benötigten Regeln in Ihr Stylesheet.

Sie erhalten einen Referenzeintrag mit der Eigenschaft, ihren gelisteten Werten, einer Beschreibung und einem passenden CSS-Snippet für ein Kartenlayout mit Umbruch.

Einschränkungen

• Die Ausgabe ist als Referenz mit CSS-Beispielen angelegt. Die Darstellung und das berechnete Layout Ihres eigenen Projekts müssen Sie unabhängig davon in CSS und im Browser prüfen.

Häufige Fehler

• Wenn eine gewünschte Änderung ausbleibt, wird oft eine Eigenschaft für den Container mit einer Eigenschaft für das einzelne Element verwechselt. Prüfen Sie zuerst, auf welcher Ebene die gesuchte Einstellung gilt, und vergleichen Sie sie mit dem aufgeführten Standardwert.

Häufige Fragen

Gibt es ein Beispiel für ein Kartenlayout mit Umbruch?

Ja, sofern Sie ein Kartenraster als Ausgangspunkt suchen: Der Spickzettel enthält ein Beispielmuster für umbrechende Kartenlayouts. Passen Sie die Regeln anschließend an Ihr eigenes Markup an.

Welche Werte werden für gap gezeigt?

Für einen Abstand können Sie sich an den aufgeführten Längenwerten orientieren. Der Eintrag zu gap nennt 16px und 1rem als Beispiele; wählen Sie den Wert passend zu Ihrem Layout.

Wie ordne ich die Flexbox-Standardwerte ein?

Wenn Sie die Standardausrichtung nachvollziehen möchten, prüfen Sie zuerst die gelisteten Defaults: Dazu gehören unter anderem row, kein Umbruch und stretch für die Ausrichtung von Elementen. Danach vergleichen Sie die gesetzten Regeln in Ihrem eigenen Stylesheet.