Flexbox und Grid

Diese Lektion behandelt die modernen Layout-Methoden in CSS: Flexbox und Grid. Ziel ist, responsive und flexible Layouts effizient zu gestalten.

1. Flexbox

Flexbox (Flexible Box) ist ein Layout-Modell, um Elemente in einer Dimension (Zeile oder Spalte) auszurichten und zu verteilen.

Container: display: flex;
Richtung: flex-direction (row, column)
Ausrichtung entlang der Hauptachse: justify-content
Ausrichtung entlang der Querachse: align-items
Flexibles Wachstum/Schrumpfen: flex-grow, flex-shrink, flex-basis

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex: 1; /* gleichmäßige Verteilung */
}

2. Grid

CSS Grid ist ein zweidimensionales Layout-System, das Zeilen und Spalten gleichzeitig verwaltet.

Container: display: grid;
Zeilen und Spalten definieren: grid-template-rows, grid-template-columns
Abstand: gap oder row-gap/column-gap
Positionierung: grid-row, grid-column

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

.grid-item {
    grid-column: 2 / 3;
    grid-row: 1;
}

3. Flexbox vs Grid

Flexbox eignet sich für lineare Layouts (eine Dimension), Grid für komplexe, zweidimensionale Layouts.

Flexbox: besser für Navigation, Toolbars, einfache Reihen/Spalten
Grid: besser für gesamte Seitenlayouts, komplexe Anordnungen
Beide können kombiniert werden

4. Zusammenfassung

Flexbox = ein-dimensional, einfach zu justieren
Grid = zwei-dimensional, sehr mächtig für komplexe Layouts
Abstände: Gap, Padding, Margin beachten
Responsives Design: Flexbox und Grid erleichtern Anpassung an Bildschirmgrößen

Flexbox und Grid sind die modernen Werkzeuge, um HTML-Elemente sauber, flexibel und responsive zu platzieren.