HTML & CSS

Flexbox in CSS: Eindimensionale Layouts sicher beherrschen

Flexbox macht Ausrichten und Verteilen im Web endlich intuitiv. Du lernst Container, Items, die wichtigsten Eigenschaften und baust am Ende eine responsive Navigationsleiste.

Anton

— 3 Min. Lesezeit
Teilen

Kennst du das? Du willst nur ein paar Elemente nebeneinander legen und vertikal zentrieren – und plötzlich jonglierst du mit float, display: inline-block und mysteriösen Abständen. Genau für diese Probleme gibt es Flexbox. In diesem Artikel lernst du, wie das Flexbox-Modell funktioniert, welche Eigenschaften du wirklich brauchst und wie du damit typische Layout-Aufgaben in wenigen Zeilen löst. Wenn du CSS Grid schon kennst: Flexbox ist der eindimensionale Bruder – perfekt für eine Reihe oder eine Spalte.

Was ist Flexbox – und wann nutzt du es?

Flexbox (offiziell CSS Flexible Box Layout) ist ein Layout-Modell, das Elemente entlang einer Achse anordnet: entweder in einer Zeile oder in einer Spalte. Der große Vorteil: Flexbox verteilt verfügbaren Platz automatisch und richtet Elemente sauber aus – auch dann, wenn du die genauen Größen nicht kennst.

Die Faustregel lautet: Flexbox für eine Dimension (Navigationsleisten, Button-Gruppen, Karten in einer Reihe), Grid für zwei Dimensionen (komplette Seitenraster mit Zeilen und Spalten). Beide ergänzen sich – du darfst sie problemlos kombinieren.

Die Grundlagen: Container und Items

Flexbox arbeitet immer mit zwei Rollen: einem Flex-Container (das Elternelement) und seinen Flex-Items (den direkten Kindern). Sobald du einem Element display: flex gibst, werden seine Kinder zu Flex-Items und ordnen sich nebeneinander an.

<div class="container">
  <div class="item">Eins</div>
  <div class="item">Zwei</div>
  <div class="item">Drei</div>
</div>
.container {
  display: flex;
  gap: 1rem; /* moderner Abstand zwischen den Items */
}

Mit flex-direction bestimmst du die Hauptachse. Der Standard ist row (von links nach rechts). Mit column stapelst du die Items untereinander:

.container {
  display: flex;
  flex-direction: column; /* Items untereinander statt nebeneinander */
}

Ausrichten mit justify-content und align-items

Jetzt wird es mächtig. Flexbox kennt zwei Achsen: die Hauptachse (Richtung von flex-direction) und die Querachse (senkrecht dazu). Zwei Eigenschaften steuern die Ausrichtung:

  • justify-content verteilt die Items entlang der Hauptachse.
  • align-items richtet die Items entlang der Querachse aus.
.container {
  display: flex;
  justify-content: space-between; /* gleicher Abstand zwischen den Items */
  align-items: center;           /* vertikal mittig */
  min-height: 200px;
}

Häufige Werte für justify-content sind flex-start, center, flex-end, space-between und space-around. Für align-items nutzt du oft stretch (Standard), center oder flex-start. Die berühmte Kombination justify-content: center plus align-items: center zentriert ein Element perfekt in der Mitte – horizontal und vertikal.

Flexible Größen: grow, shrink und basis

Der Name Flexbox kommt daher, dass Items flexibel wachsen und schrumpfen können. Das steuerst du auf den Items selbst mit drei Eigenschaften, die meist über die Kurzform flex gesetzt werden:

  • flex-grow: Wie stark darf ein Item wachsen, wenn Platz frei ist? (Zahl, Standard 0)
  • flex-shrink: Wie stark darf ein Item schrumpfen, wenn der Platz eng wird? (Zahl, Standard 1)
  • flex-basis: Welche Ausgangsgröße hat das Item, bevor verteilt wird?
.sidebar {
  flex: 0 0 250px; /* grow shrink basis: feste 250px, wächst nicht */
}

.content {
  flex: 1;         /* nimmt den gesamten übrigen Platz ein */
}

Das ist ein extrem häufiges Muster: eine fixe Seitenleiste neben einem flexiblen Inhaltsbereich. flex: 1 ist dabei die Kurzform für flex: 1 1 0 und bedeutet schlicht „teile dir den restlichen Raum".

Umbruch und Praxis: Eine responsive Navigationsleiste

Standardmäßig quetscht Flexbox alle Items in eine einzige Zeile. Mit flex-wrap: wrap erlaubst du Umbrüche, sobald der Platz nicht mehr reicht – ideal für responsive Layouts. Bauen wir eine klassische Navigationsleiste mit Logo links und Links rechts:

<nav class="navbar">
  <div class="logo">MeineSeite</div>
  <ul class="links">
    <li><a href="#">Start</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>
.navbar {
  display: flex;
  justify-content: space-between; /* Logo links, Links rechts */
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

.links {
  display: flex;      /* auch die Link-Liste ist ein Flex-Container */
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

Beachte den Trick: Die <nav> ist ein Flex-Container für Logo und Linkliste, und die <ul> ist gleichzeitig ein eigener Flex-Container für die einzelnen Links. Solche verschachtelten Flexboxen sind der Normalfall in echten Projekten – jede Ebene löst genau ihre eine Aufgabe.

Fazit

Flexbox nimmt dir das mühsame Ausrichten und Verteilen ab, das früher mit float so viel Frust bereitet hat. Merke dir die drei Bausteine: display: flex aktiviert das Modell, justify-content und align-items steuern die Ausrichtung auf beiden Achsen, und flex auf den Items regelt das Wachsen und Schrumpfen. Am besten öffnest du jetzt die Entwicklertools deines Browsers, baust die Navigationsleiste nach und spielst mit den Werten herum – Flexbox versteht man am schnellsten, wenn man live sieht, wie sich die Boxen bewegen. Viel Spaß beim Ausprobieren!

Weiterlesen