Flexbox: Achsen, justify/align, gap, flex-grow

Beherrsche die zwei Achsen von Flexbox, um deine Elemente in alltäglichen Layouts auszurichten, zu zentrieren und zu verteilen.

9 Min. · 3 Fragen

Navigationsleiste, Kartenreihe, ausgerichtetes Formular: Flexbox ist das Alltagswerkzeug für eindimensionales Layout. Alles beruht auf zwei Achsen: der Hauptachse (festgelegt durch flex-direction, standardmäßig horizontal) und der Querachse, senkrecht zur ersten. justify-content verteilt die Elemente entlang der Hauptachse; align-items richtet sie auf der Querachse aus. Merk dir dieses Duo: Es löst die meisten Fälle. Nehmen wir eine klassische Navigationsleiste.

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Try it</button>
</nav>

Ein paar Deklarationen verwandeln diese Liste in eine professionelle Leiste: space-between schiebt das Logo nach links und die Schaltfläche nach rechts, align-items: center richtet Elemente unterschiedlicher Höhe vertikal aus, und gap verteilt die Links, ohne dass du Außenabstände verwalten musst.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

Kopfübung: Wenn du .navbar auf flex-direction: column umstellst, was macht dann justify-content: space-between? Es verteilt die Elemente jetzt vertikal, weil sich die Hauptachse gedreht hat. Das ist die klassische Flexbox-Falle: justify-content und align-items bedeuten nicht "horizontal" und "vertikal", sondern "Hauptachse" und "Querachse". Ein weiterer unverzichtbarer Anwendungsfall: Inhalte perfekt zentrieren.

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

flex-grow verteilt den verbleibenden freien Platz auf die Elemente. Konkreter Fall: ein Layout mit einer festen Seitenleiste und Inhalt, der den ganzen Rest füllt. flex: 0 0 240px fixiert die Seitenleiste (sie wächst weder noch schrumpft sie), während flex-grow: 1 den Inhalt den gesamten verfügbaren Platz einnehmen lässt.

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was steuert justify-content bei flex-direction: column?
   • Die horizontale Ausrichtung der Elemente
   • Die vertikale Ausrichtung, weil die Hauptachse vertikal geworden ist
   • Den Abstand zwischen Textzeilen
2. Welche Kombination zentriert ein Element sowohl horizontal als auch vertikal in einem Flex-Container?
   • text-align: center und vertical-align: middle
   • justify-content: center und align-items: center
   • margin: 0 auto auf dem Container
3. In einem Flex-Container hat .a flex-grow: 2 und .b flex-grow: 1. Was passiert?
   • .a ist immer genau doppelt so breit wie .b
   • .a erhält doppelt so viel vom verbleibenden freien Platz wie .b
   • .b wird zugunsten von .a ausgeblendet