6.2 Layout-Gitter & Flexbox (Wrap, Align, Gap)
Erklärt den sinnvollen Einsatz von Flexbox-Containern für strukturierte Layouts.
Inhaltsverzeichnis
A. Containerstruktur
Jede Sektion besteht aus einem Hauptcontainer (Wrapper) und optional 1–2 inneren Containern (z. B. Text + Bild). Breite max. 1200px.
B. Padding-Logik
- Standard: Padding Top/Bottom = 6em
- Seitenränder: 5%
- Innen-Spacing via Gap (nicht Margin)
💡Tipp: Gap zwischen inneren Containern ist performanter als einzelne Margins.
- Globale Typo verwenden
- Nur Margin-Bottom für Abstände
- Keine verschachtelten Container