Layout mit Flexbox

Flexbox ist ein modernes CSS-Layout-Modell zur Anordnung von Elementen in einer Dimension (Zeile oder Spalte). Es ist zentral für saubere Seitenlayouts und responsive Designs.

1. Motivation

Flexbox löst klassische Probleme von Layouts: Ausrichtung, Zentrierung, flexible Breiten und Abstände.

2. Flex-Container

Ein Element wird zum Flex-Container, wenn display: flex gesetzt wird. 
.container {
  display: flex;
}

Alle direkten Kinder dieses Elements werden automatisch Flex-Items.

3. Haupt- und Querachse

Flexbox arbeitet mit zwei Achsen:
Die Richtung der Hauptachse wird durch flex-direction bestimmt.

4. flex-direction

Legt die Richtung der Hauptachse fest. 
.container {
  display: flex;
  flex-direction: row;     /* Standard */
}

5. Ausrichtung entlang der Hauptachse

justify-content steuert die Verteilung entlang der Hauptachse. 
.container {
  justify-content: space-between;
}

6. Ausrichtung entlang der Querachse

align-items steuert die Ausrichtung senkrecht zur Hauptachse. 
.container {
  align-items: center;
}

7. Typisches Seitenlayout

<div class="page">
  <nav>Navigation</nav>
  <main>Inhalt</main>
</div>
.page {
  display: flex;
}

nav {
  width: 200px;
}

main {
  flex: 1;
}
flex: 1 bedeutet: nimm den verbleibenden Platz ein.

8. Flexbox für Formulare

Flexbox eignet sich hervorragend zur Ausrichtung von Labels und Inputs. 
.field {
  display: flex;
  gap: 1rem;
}

9. Häufige Fehler

10. Zusammenfassung