CSS Flexbox & Grid

6 Kernkonzepte
Die wichtigsten Eigenschaften von Flexbox und CSS Grid: Flexbox · Flex-Container · Flex-Items · CSS Grid · Grid-Container · Grid-Items Flexbox und Grid sind die modernen Layout-Modelle von CSS. Flexbox ist ideal für eindimensionale Layouts (Zeilen oder Spalten), Grid für zweidimensionale Layouts (Zeilen und Spalten).

Flexbox – Eindimensionale Layouts

display: flex · flex-direction · flex-wrap
.container { display: flex; flex-direction: row; /* row | column | row-reverse | column-reverse */ flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */ }

Flexbox ist ein eindimensionales Layout-Modell für die Verteilung von Elementen entlang einer Hauptachse (row oder column). Es ist ideal für Navigationen, Karten-Layouts und zentrierte Inhalte.

Flexbox-Grundlagen

Eigenschaft Beschreibung Werte
display Aktiviert Flexbox flex, inline-flex
flex-direction Hauptachse row, column, row-reverse, column-reverse
flex-wrap Umbruchverhalten nowrap, wrap, wrap-reverse
flex-flow Kurzform für direction + wrap row wrap, column nowrap
Beispiele
/* Navigation horizontal */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Karten-Layout mit Wrap */
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
/* Zentrieren (horizontal & vertikal) */
.center {
display: flex;
justify-content: center;
align-items: center;
}
Tipp: Flexbox eignet sich hervorragend für die vertikale und horizontale Zentrierung mit justify-content: center und align-items: center.

Flex-Container – justify-content · align-items · gap

justify-content · align-items · align-content · gap
.container { justify-content: center; align-items: center; align-content: space-between; gap: 10px; }

Flex-Container-Eigenschaften steuern die Ausrichtung und Verteilung der Flex-Items auf der Haupt- und Kreuzachse.

Flex-Container-Eigenschaften

Eigenschaft Beschreibung Werte
justify-content Ausrichtung auf Hauptachse flex-start, flex-end, center, space-between, space-around, space-evenly
align-items Ausrichtung auf Kreuzachse (einzeilig) stretch, flex-start, flex-end, center, baseline
align-content Ausrichtung auf Kreuzachse (mehrzeilig) stretch, flex-start, flex-end, center, space-between, space-around
gap Abstand zwischen Items 10px, 1rem, 5%
row-gap Abstand zwischen Zeilen 10px, 1rem
column-gap Abstand zwischen Spalten 10px, 1rem
Beispiele
/* Items gleichmäßig verteilen */
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Mehrzeilige Ausrichtung */
.grid {
display: flex;
flex-wrap: wrap;
align-content: center;
gap: 15px;
}
/* Items in der Mitte zentrieren */
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Tipp: gap ist eine moderne Alternative zu margin für Abstände zwischen Flex-Items – es funktioniert wie bei CSS Grid.

Flex-Items – flex-grow · flex-shrink · flex-basis · order

flex-grow · flex-shrink · flex-basis · order · align-self
.item { flex-grow: 1; flex-shrink: 0; flex-basis: 200px; order: 2; }

Flex-Item-Eigenschaften steuern das individuelle Verhalten jedes Elements innerhalb eines Flex-Containers – wie Wachstum, Schrumpfung und Reihenfolge.

Flex-Item-Eigenschaften

Eigenschaft Beschreibung Werte
flex-grow Wachstumsfaktor (verteilt freien Platz) 0 (Standard), 1, 2, ...
flex-shrink Schrumpfungsfaktor 1 (Standard), 0, 2, ...
flex-basis Ausgangsgröße vor Wachstum/Schrumpfung auto, 200px, 50%
flex Kurzform (grow shrink basis) 1, 1 0 auto, 0 1 200px
order Reihenfolge (visuell) 0 (Standard), -1, 1, 2, ...
align-self Individuelle Ausrichtung auf Kreuzachse auto, flex-start, flex-end, center, stretch, baseline
Beispiele
/* Gleichmäßige Verteilung */
.item {
flex: 1; /* flex-grow: 1 */
}
/* Erstes Item doppelt so breit */
.item:first-child {
flex-grow: 2;
}
/* Item soll nicht schrumpfen */
.sidebar {
flex: 0 0 250px; /* flex-grow: 0, flex-shrink: 0, flex-basis: 250px */
}
/* Reihenfolge ändern */
.item:last-child {
order: -1; /* wird als erstes angezeigt */
}
/* Individuelle Ausrichtung */
.item:last-child {
align-self: flex-end;
}
Tipp: flex: 1 ist die Kurzform für flex-grow: 1; flex-shrink: 1; flex-basis: 0; – ideal für gleichmäßige Verteilung.

CSS Grid – Zweidimensionale Layouts

display: grid · grid-template-columns · grid-template-rows
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 200px auto; gap: 10px; }

CSS Grid ist ein zweidimensionales Layout-Modell für Zeilen und Spalten. Es ist ideal für komplexe Seitenlayouts, Dashboard und Bildergalerien.

Grid-Grundlagen

Eigenschaft Beschreibung Werte
display Aktiviert Grid grid, inline-grid
grid-template-columns Spalten definieren 1fr 2fr, repeat(3, 1fr), auto, 100px
grid-template-rows Zeilen definieren auto, 200px, 1fr, minmax(100px, auto)
gap Abstand zwischen Zellen 10px, 1rem
grid-template-areas Bereiche benennen "header header", "sidebar main"
Beispiele
/* 3-Spalten-Layout */
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
/* Repeat-Funktion */
.container {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px);
}
/* Responsiv mit minmax */
.container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
Tipp: repeat(auto-fill, minmax(200px, 1fr)) erstellt ein responsives Raster, das so viele Spalten wie möglich erstellt – perfekt für Karten-Layouts.

Grid-Container – justify-items · align-items · place-items

justify-items · align-items · place-items · justify-content · align-content
.container { justify-items: center; align-items: center; place-items: center; justify-content: space-between; }

Grid-Container-Eigenschaften steuern die Ausrichtung aller Grid-Items innerhalb der Zellen und die Verteilung des verfügbaren Platzes.

Grid-Container-Eigenschaften

Eigenschaft Beschreibung Werte
justify-items Ausrichtung in den Zellen (horizontal) stretch, start, end, center
align-items Ausrichtung in den Zellen (vertikal) stretch, start, end, center
place-items Kurzform (align-items justify-items) center, start end
justify-content Verteilung des Grids (horizontal) start, end, center, space-between, space-around, space-evenly
align-content Verteilung des Grids (vertikal) start, end, center, space-between, space-around, space-evenly
place-content Kurzform (align-content justify-content) center, space-between
Beispiele
/* Items in Zellen zentrieren */
.container {
display: grid;
place-items: center;
}
/* Grid im Container zentrieren */
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center;
align-content: center;
}
Tipp: place-items: center ist die Kurzform für align-items: center; justify-items: center; – perfekt für die Zentrierung von Inhalten in Grid-Zellen.

Grid-Items – grid-column · grid-row · grid-area

grid-column · grid-row · grid-area · justify-self · align-self
.item { grid-column: 1 / 3; /* startet bei Spalte 1, endet bei 3 */ grid-row: 2 / 4; grid-area: header; /* mit grid-template-areas */ }

Grid-Item-Eigenschaften steuern die Positionierung und Größe einzelner Elemente im Grid – über Spalten-, Zeilen- und Bereichsangaben.

Grid-Item-Eigenschaften

Eigenschaft Beschreibung Werte
grid-column Spaltenposition 1 / 3, span 2, 2 / -1
grid-row Zeilenposition 1 / 3, span 2, 2 / -1
grid-area Bereich oder grid-row / grid-column header, 1 / 2 / 3 / 4
justify-self Individuelle horizontale Ausrichtung stretch, start, end, center
align-self Individuelle vertikale Ausrichtung stretch, start, end, center
place-self Kurzform (align-self justify-self) center, start end
Beispiele
/* Item über 2 Spalten */
.item {
grid-column: 1 / 3;
}
/* Item über 3 Zeilen */
.item {
grid-row: 2 / 5;
}
/* Mit grid-template-areas */
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
/* Individuelle Ausrichtung */
.item {
justify-self: center;
align-self: end;
}
Tipp: grid-area mit grid-template-areas macht Layouts extrem lesbar – ideal für komplexe Seitenstrukturen.

Flexbox vs CSS Grid – Wann verwenden?

Flexbox Eindimensional
Zeile oder Spalte
Grid Zweidimensional
Zeilen und Spalten
Flexbox Inhaltsbasiert
Items bestimmen Größe
Grid Container-basiert
Container bestimmt Struktur
Flexbox Navigation, Karten, kleine Layouts
Header, Footer, Formulare
Grid Gesamtlayout, Dashboards, Galerien
Seitenstruktur, Tabellen

Quick Summary

flex
Flexbox aktivieren
justify-content
Ausrichtung Hauptachse
flex: 1
Wachstumsfaktor
grid
Grid aktivieren
grid-template
Grid-Struktur
grid-area
Bereich zuweisen
display: flex; justify-content: center; align-items: center; · display: grid; grid-template-columns: repeat(3, 1fr);
Alle Cheatsheets Impressum Datenschutz
Zum Drucken
© ITGrundlagen.com · CSS Flexbox & Grid Cheatsheet · Befehlsübersicht · Schnellreferenz