Flexbox in der Praxis

Praxisbeispiel: horizontales Navigationsmenü

Der Ausgangspunkt für ein Navigationsmenü ist immer eine ganz normale Liste mit Links in einem nav-Tag - auch ohne CSS muss sie benutzbar bleiben:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/ueber-uns">Über uns</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

Ohne CSS steht diese Liste einfach untereinander - genau der Normal Flow von vorhin.

Mit Flexbox wird daraus mit wenigen Zeilen ein horizontales Menü:

nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  padding-left: 0;
}

nav a {
  text-decoration: none;
  font-weight: 600;
  color: inherit;
}

Das kennt ihr schon aus dem CSS-Kapitel: list-style: none entfernt die Punkte, padding-left: 0 die Standard-Einrückung. Neu ist nur display: flex auf der <ul> - die <li>-Elemente stehen dadurch automatisch nebeneinander.

Eine typische Kopfzeile: Logo links, Navigation rechts, beides in einer Zeile:

<header class="site-header">
  <img src="logo.svg" alt="Firmenlogo" class="logo">
  <nav>
    <ul>...</ul>
  </nav>
</header>

.site-header {
  display: flex;
  justify-content: space-between; /* Logo an den Anfang, Nav ans Ende */
  align-items: center;             /* beide vertikal zentriert */
  padding: 16px 24px;
}

Praxisbeispiel: eine Reihe von Cards

<div class="card-row">
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
</div>

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 280px; /* wächst/schrumpft, Ausgangsbreite 280px */
}

Auf breiten Bildschirmen stehen alle Cards nebeneinander und teilen sich den Platz
Wird der Platz zu knapp, springen überzählige Cards dank flex-wrap: wrap in die nächste Zeile
flex-basis: 280px gibt vor, ab welcher Breite eine Card “genug” hat, bevor der nächste Umbruch passiert

Praxisbeispiel: responsives Menü ohne Media Query

Reicht der Platz nicht für alle Menüpunkte in einer Zeile, bricht flex-wrap: wrap einfach um - eine einfache Alternative zum klassischen “Hamburger-Menü” mit JavaScript, wenn ein Umbruch auf mehrere Zeilen akzeptabel ist:

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px; /* row-gap 8px, column-gap 24px */
}