Flexbox & Grid vertieft
Flexbox verteilt Elemente entlang einer Achse, Grid beherrscht zwei Achsen. Wer beide gezielt kombiniert, braucht weniger Ausnahmen.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Flexbox: Wachstum und Umbruch
flex-direction legt die Hauptachse fest.
justify-content verteilt entlang dieser Achse, align-items entlang der Querachse.
flex: 1 1 16rem bedeutet: Das Element darf wachsen, schrumpfen und startet bei 16rem. flex-wrap erlaubt den Umbruch auf die nächste Zeile.
.nav {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.nav__spacer {
flex: 1;
}Grid: Spalten und automatische Raster
grid-template-columns beschreibt die Spalten.
minmax und auto-fit erzeugen ein Raster, das sich ohne Media Query anpasst.
grid-area benennt Bereiche, wenn das Layout aus klar getrennten Zonen besteht. Für einzelne Karten ist ein einfaches Spaltenraster meist ausreichend.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}Wann welches Layout?
Flexbox ist die erste Wahl für eine einzelne Reihe oder Spalte: Navigation, Button-Gruppe, Kartenfuß.
Grid eignet sich für Seitenlayouts und Raster mit zwei Achsen. Beide lassen sich kombinieren: Das Grid ordnet die Bereiche, Flexbox ordnet den Inhalt innerhalb einer Karte.
.page {
display: grid;
grid-template-columns: 16rem 1fr;
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
}
.card__footer {
margin-top: auto;
}Vertiefung
Achsen und Raster
Flexbox arbeitet entlang einer Hauptachse. justify-content verteilt auf dieser Achse, align-items auf der Querachse. Mit flex-wrap und flex-basis entstehen Reihen, die bei Platzmangel umbrechen.
Grid beschreibt Spalten und Zeilen gleichzeitig. minmax und auto-fit machen ein Raster ohne Media Query flexibel. Für Seitenlayouts ist Grid meist die klarere Wahl, für Inhalte innerhalb einer Karte Flexbox.
.page {
display: grid;
grid-template-columns: minmax(14rem, 18rem) 1fr;
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
}
.card__footer {
margin-top: auto;
}Merksatz: Grid ordnet Bereiche, Flexbox ordnet Inhalte. Kombiniere beide, statt ein Modell zu erzwingen.
Übungsaufgabe
Dashboard mit Grid und Flex
Baue ein Dashboard mit Sidebar und Hauptbereich. Der Hauptbereich enthält Karten, deren Fußzeile per Flexbox unten sitzt.
Das soll dein Programm können
- Grid für Sidebar und Hauptbereich
- Kartenraster mit auto-fit und minmax
- Flexbox für den Karteninhalt
- Fußzeile mit margin-top: auto
- Abstand über gap statt Margin-Ketten
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Das Kartenraster braucht repeat(auto-fit, minmax(16rem, 1fr)). Die Karte wird display: flex; flex-direction: column, der Footer bekommt margin-top: auto.
Lösung anzeigen
.page {
display: grid;
grid-template-columns: 16rem 1fr;
gap: 1rem;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.card__footer {
margin-top: auto;
}Warum funktioniert das?
Das Grid ordnet die großen Bereiche, das Kartenraster passt sich automatisch an. Flexbox sorgt dafür, dass der Footer jeder Karte unabhängig von der Textlänge unten bleibt.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.