CSS-Flexbox-Layout-Spickzettel
Diese Seite bietet einen visuellen Spickzettel für das CSS-Flexbox-Layout, einschließlich Container-Eigenschaften, Element-Eigenschaften und gängiger Layout-Beispiele.
Container-Eigenschaften
| Eigenschaft | Wert | Beschreibung |
|---|---|---|
display |
flex |
Aktiviert das elastische Layout |
flex-direction |
row |
Hauptachse ist horizontal, Startpunkt links |
row-reverse |
Hauptachse ist horizontal, Startpunkt rechts | |
column |
Hauptachse ist vertikal, Startpunkt oben | |
column-reverse |
Hauptachse ist vertikal, Startpunkt unten | |
flex-wrap |
nowrap |
Standardwert, Elemente werden in einer Linie angeordnet |
wrap |
Zeilenumbruch für Elemente | |
wrap-reverse |
Umgekehrter Zeilenumbruch für Elemente | |
justify-content |
flex-start |
Ausrichtung der Hauptachse: linksbündig |
flex-end |
Ausrichtung der Hauptachse: rechtsbündig | |
center |
Ausrichtung der Hauptachse: zentriert | |
space-between |
Ausrichtung der Hauptachse: Blocksatz, Abstände zwischen Elementen sind gleich | |
space-around |
Ausrichtung der Hauptachse: Abstände um Elemente herum sind gleich | |
align-items |
flex-start |
Ausrichtung der Querachse: oben bündig |
flex-end |
Ausrichtung der Querachse: unten bündig | |
center |
Ausrichtung der Querachse: zentriert | |
baseline |
Ausrichtung der Querachse: Ausrichtung an der Text-Grundlinie | |
stretch |
Standardwert, Ausrichtung an der Querachse: dehnen, um den Container zu füllen | |
align-content |
flex-start |
Ausrichtung der Querachse bei mehreren Zeilen: oben bündig |
flex-end |
Ausrichtung der Querachse bei mehreren Zeilen: unten bündig | |
center |
Ausrichtung der Querachse bei mehreren Zeilen: zentriert | |
space-between |
Ausrichtung der Querachse bei mehreren Zeilen: Blocksatz, Abstände zwischen den Zeilen sind gleich | |
space-around |
Ausrichtung der Querachse bei mehreren Zeilen: Abstände um die Zeilen herum sind gleich | |
stretch |
Standardwert, Ausrichtung an der Querachse bei mehreren Zeilen: dehnen, um den verbleibenden Raum zu füllen |
Element-Eigenschaften (Items)
| Eigenschaft | Wert | Beschreibung |
|---|---|---|
flex-grow |
number |
Definiert den Vergrößerungsfaktor eines Elements, Standard ist 0 (keine Vergrößerung) |
flex-shrink |
number |
Definiert den Verkleinerungsfaktor eines Elements, Standard ist 1 |
flex-basis |
auto |
Definiert die Standardgröße eines Elements, bevor der verbleibende Raum verteilt wird |
align-self |
auto |
Ermöglicht die individuelle Ausrichtung eines Elements, überschreibt align-items |
flex-start |
Das Element befindet sich am Anfang des Containers | |
flex-end |
Das Element befindet sich am Ende des Containers | |
center |
Das Element befindet sich in der Mitte des Containers | |
baseline |
Die Grundlinie des Elements wird an der Grundlinie des Containers ausgerichtet | |
stretch |
Das Element wird gedehnt, um den Container zu füllen (falls der Container eine Höhe hat) |
Gängige Layout-Beispiele
| Layout | Container-Eigenschaften | Element-Eigenschaften |
|---|---|---|
| Horizontale Navigationsleiste | display: flex;justify-content: space-around; |
|
| Vertikale Seitenleiste | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Gitter-Layout | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Karten-Layout | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |