CSS-Flexbox-Tutorial: der komplette Guide zu flexiblen Layouts

Flexbox ist ein CSS-Layoutmodul, mit dem du flexible, anpassungsfähige Layouts für deine HTML-Elemente baust. Nützlich wird es vor allem dann, wenn ein Layout mit unterschiedlichen Bildschirmgrößen und Geräten zurechtkommen muss.

Mit Flexbox richtest du Elemente horizontal oder vertikal aus, steuerst den Abstand zwischen ihnen und legst ihre Reihenfolge fest. Dazu kommen flexible Wege, die Größe der Elemente zu bestimmen – genau das, was ein responsives Layout braucht.

Um Flexbox in deinem Projekt zu nutzen, deklarierst du zuerst einen Flex-Container mit der CSS-Eigenschaft display: flex oder display: inline-flex auf einem HTML-Element. Ab da steuern die Flexbox-Eigenschaften das Layout seiner Kinder.

.container-flex {
    display: flex;
}

Elemente mit Flexbox ausrichten

Eine der nützlichsten Fähigkeiten von Flexbox ist die flexible Ausrichtung der Elemente. Mehrere Eigenschaften steuern, wie sich die Elemente innerhalb eines Flex-Containers anordnen.

Horizontale Ausrichtung mit justify-content

Die Eigenschaft justify-content steuert die horizontale Ausrichtung der Elemente. 

justify-content: flex-start;

justify-content: center;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

/*richtet die Elemente am linken Rand aus*/
.container {
    justify-content: flex-start;
}
/*zentriert die Elemente*/
.container {
    justify-content: center;
}
/*richtet die Elemente am rechten Rand aus*/
.container {
    justify-content: flex-end;
}
/*verteilt die Elemente gleichmäßig zwischen linkem und rechtem Rand, ohne Abstand an den Rändern*/
.container {
    justify-content: space-between;
}
/*verteilt die Elemente gleichmäßig zwischen linkem und rechtem Rand, mit gleichem Abstand an beiden Rändern*/
.container {
    justify-content: space-around;
}
/* verteilt die Elemente gleichmäßig zwischen linkem und rechtem Rand, mit gleichem Abstand an beiden Rändern und zwischen den Elementen */
.container {
    justify-content: space-evenly;
}

Vertikale Ausrichtung mit align-items

Die Eigenschaft align-items steuert die vertikale Ausrichtung der Elemente.

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: stretch;

/* Alle Elemente oben ausrichten */
.container {
    align-items: flex-start;
}

/* Alle Elemente mittig ausrichten */
.container {
    align-items: center;
}

/* Alle Elemente unten ausrichten */
.container {
    align-items: flex-end;
}

/*sorgt dafür, dass die Elemente die Höhe ihres Inhalts annehmen*/
.container {
    align-items: stretch;
}

Abstände zwischen Elementen mit Flexbox steuern

Flexbox verwaltet auch die Abstände zwischen den Elementen. Mehrere Eigenschaften bestimmen, wie viel Platz zwischen den Elementen eines Flex-Containers liegt.

Abstand zwischen Elementen mit margin

Die Eigenschaft margin legt den Abstand zwischen einem Element und seinen Nachbarn fest. Damit vergibst du Abstände Element für Element.

/* 20px Abstand zwischen den Elementen hinzufügen */
.item {
    margin: 0 20px;
}

Innenabstand eines Elements mit padding

Die Eigenschaft padding legt den Abstand zwischen den Rändern eines Elements und seinem Inhalt fest. Damit polsterst du ein einzelnes Element von innen.

/* 20px Abstand um ein Element herum hinzufügen */
.item {
    padding: 20px;
}

Abstände mit gap setzen

Seit CSS Grid Layout kennt auch Flexbox gap, um Platz zwischen die Elemente zu legen. Die Eigenschaft vergibt einen einheitlichen Abstand zwischen allen Elementen eines Flex-Containers.

/* 20px Abstand zwischen allen Elementen hinzufügen */
.container {
    gap: 20px;
}

Zusammen mit row-gap und column-gap vergibst du unterschiedliche Abstände für Zeilen und Spalten. Zu beachten: Der Abstand greift nur bei den direkten Kindern des Flex-Containers, und die Browser-Unterstützung solltest du vor dem Einsatz prüfen.

Die Flexbox-Eigenschaften

Flexbox bringt zahlreiche Eigenschaften für flexible, anpassungsfähige Layouts mit. In diesem Abschnitt gehen wir die gebräuchlichsten durch.

flex-direction

Die Eigenschaft flex-direction legt fest, in welche Richtung die Elemente in einem Flex-Container angeordnet werden. Vier Werte stehen zur Wahl: row, row-reverse, column und column-reverse. Standard ist row.

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

/* Elemente in einer Zeile anordnen (Standard) */
.container {
    flex-direction: row;
}

/* Elemente in einer umgekehrten Zeile anordnen */
.container {
    flex-direction: row-reverse;
}

/* Elemente in einer Spalte anordnen */
.container {
    flex-direction: column;
}

/* Elemente in einer umgekehrten Spalte anordnen */
.container {
    flex-direction: column-reverse;
}

flex-wrap

Die Eigenschaft flex-wrap legt fest, ob die Elemente eines Flex-Containers in einer einzigen Zeile oder in mehreren Zeilen angeordnet werden. Es gibt drei mögliche Werte: nowrap (Standard), wrap und wrap-reverse, das die Zeilen in umgekehrter Reihenfolge stapelt.

flex-wrap: nowrap;

flex-wrap: wrap;

/* Elemente auf einer einzigen Zeile anordnen (Standard) */
.container {
    flex-wrap: nowrap;
}

/* Elemente auf mehrere Zeilen verteilen */
.container {
    flex-wrap: wrap;
}

flex-flow

Die Eigenschaft flex-flow ist die Kurzschreibweise für flex-direction und flex-wrap:

/* Elemente in einer Zeile anordnen und auf mehrere Zeilen verteilen */
.container {
    flex-flow: row wrap;
}

justify-content

Die Eigenschaft justify-content bestimmt, wie die Elemente eines Flex-Containers auf der horizontalen Achse (x) ausgerichtet werden. Mögliche Werte: flex-start, center, flex-end, space-between, space-around und space-evenly. Standard ist flex-start.

/*richtet die Elemente am linken Rand aus*/
.container {
    justify-content: flex-start;
}
/*zentriert die Elemente*/
.container {
    justify-content: center;
}
/*richtet die Elemente am rechten Rand aus*/
.container {
    justify-content: flex-end;
}
/*verteilt die Elemente gleichmäßig zwischen
dem linken und rechten Rand, ohne Abstand an den Rändern*/
.container {
    justify-content: space-between;
}
/*verteilt die Elemente gleichmäßig zwischen dem linken Rand
und dem rechten Rand, mit gleichem Abstand an beiden Rändern*/
.container {
    justify-content: space-around;
}
/* verteilt die Elemente gleichmäßig zwischen dem linken Rand
und dem rechten Rand, mit gleichem Abstand an beiden Rändern und
zwischen den Elementen */
.container {
    justify-content: space-evenly;
}

align-items

Die Eigenschaft align-items bestimmt, wie die Elemente eines Flex-Containers auf der vertikalen Achse (y) ausgerichtet werden. Mögliche Werte: flex-start, center, flex-end, baseline und stretch. Standard ist stretch.

/* Alle Elemente oben ausrichten */
.container {
    align-items: flex-start;
}

/* Alle Elemente mittig ausrichten */
.container {
    align-items: center;
}

/* Alle Elemente unten ausrichten */
.container {
    align-items: flex-end;
}

/*sorgt dafür, dass die Elemente die Höhe ihres Inhalts annehmen*/
.container {
    align-items: stretch;
}

align-content

Die Eigenschaft align-content ähnelt align-items, wirkt aber auf die Zeilen eines mehrzeiligen Flex-Containers. Sie akzeptiert dieselben Werte wie align-items, plus space-between, space-around und space-evenly zum Verteilen der Zeilen.

align-content: flex-start;

align-content: center;

align-content: flex-end;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

/*richtet die Elemente am linken Rand aus*/
.container {
    justify-content: flex-start;
}
/*zentriert die Elemente*/
.container {
    justify-content: center;
}
/*richtet die Elemente am rechten Rand aus*/
.container {
    justify-content: flex-end;
}
/*verteilt die Elemente gleichmäßig zwischen dem
linken und rechten Rand, ohne Abstand an den
Rändern*/
.container {
    justify-content: space-between;
}
/*verteilt die Elemente gleichmäßig zwischen dem linken
und dem rechten Rand, mit gleichem Abstand an
beiden Rändern*/
.container {
    justify-content: space-around;
}
/* verteilt die Elemente gleichmäßig zwischen dem linken
und dem rechten Rand, mit gleichem Abstand an beiden
Rändern und zwischen den Elementen */
.container {
    justify-content: space-evenly;
}

order

Die Eigenschaft order legt die Anzeigereihenfolge der Elemente eines Flex-Containers fest. Sie nimmt eine ganze Zahl als Wert, Standard ist 0.

<div class="container">
    <div class="item first">1</div>
    <div class="item second">2</div>
    <div class="item third">3</div>
    <div class="item fourth">4</div>
    <div class="item fifth">5</div>
</div>

.container {
    display: flex;
}
/*setzt Element 1 an die erste Stelle*/
.first {
    order: -1;
}
/*setzt Element 3 an die zweite Stelle*/
.third {
    order: 2;
}
/*setzt Element 5 an die letzte Stelle*/
.fifth {
    order: 3;
}

Mit diesem Code erscheinen die Elemente in dieser Reihenfolge: 1, 3, 2, 4, 5

Alle Elemente mit gesetztem Wert werden danach sortiert, Elemente ohne Angabe bekommen den Standardwert 0. Negative Werte landen vor den positiven.

Mit diesen Werten stellst du die gewünschte Anzeige ein. Wichtig: Die Reihenfolge der CSS-Regeln in der Datei ändert nichts an der Anzeigereihenfolge, dafür ist allein order zuständig.

flex-grow, flex-shrink und flex-basis

Die Eigenschaften flex-grow, flex-shrink und flex-basis bestimmen die Größe der Elemente eines Flex-Containers.

• flex-grow legt fest, welchen Anteil des verfügbaren Platzes ein Element einnimmt.
• flex-shrink legt fest, wie stark ein Element schrumpft, um in einen kleineren Container zu passen.
• flex-basis legt die Ausgangsgröße eines Elements fest, bevor flex-grow und flex-shrink greifen.

flex-grow: 1;

flex-shrink: 1;

flex-basis: 200px;

/* sorgt dafür, dass das Element
den gesamten verfügbaren Platz einnimmt */
.item {
    flex-grow: 1;
}

/* sorgt dafür, dass das Element schrumpft
um in einen kleineren Container zu passen */
.item {
    flex-shrink: 1;
}

/* eine Basisgröße von 200px für ein Element festlegen */
.item {
    flex-basis: 200px;
}

Die drei lassen sich mit der Kurzschreibweise flex kombinieren

/* flex: flex-grow | flex-shrink | flex-basi */
.item {
    flex: 1 1 200px;
}

Beispiele

Beispiel 1: ein Raster mit Flexbox

<div class="container-flex">
  <div class="item-flex item1">1</div>
  <div class="item-flex item2">2</div>
  <div class="item-flex item3">3</div>
  <div class="item-flex item4">4</div>
  <div class="item-flex item5">5</div>
  <div class="item-flex item6">6</div>
  <div class="item-flex item7">7</div>
  <div class="item-flex item8">8</div>
  <div class="item-flex item9">9</div>
</div>

.container-flex {
  display: flex;
  flex-wrap: wrap;
  /* verteilt die Elemente auf
  mehrere Zeilen, wenn nicht genug Platz da ist */
  justify-content: space-between;
  /* verteilt die Elemente gleichmäßig
  zwischen dem linken und rechten Rand, ohne Abstand
  an den Rändern */
  align-content: space-between;
  /* verteilt die Zeilen gleichmäßig zwischen
  oben und unten, ohne Abstand an den Rändern */
}
.item-flex {
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  /* nutzt flex-grow und flex-basis, um die
  Elemente auf einem Raster mit 3 Spalten zu verteilen, mit
  33.33% der verfügbaren Breite und
  20px weniger Abstand zwischen den Elementen */
}

Die Eigenschaft flex bestimmt, wie sich die Elemente an den verfügbaren Platz im Flex-Container anpassen. Hier nutzen wir flex: 1 0 calc(33.33% - 20px);, um die Elemente auf einem Raster mit 3 Spalten zu verteilen: jedes Element nimmt 33.33% der verfügbaren Breite, abzüglich der 20px Abstand zwischen den Elementen. So entsteht ein Raster, das der Fenstergröße von selbst folgt.

Kombinierst du justify-content, align-content und flex, baust du flexible Layouts für praktisch jede Anforderung. Diese Eigenschaften lassen sich auf sehr unterschiedliche Weise mischen: probiere aus, welche Kombination zu deinem Projekt passt.

Beispiel 2: ein responsives Menü

<nav class="menu-container">
  <a href="#" class="menu-item">Home</a>
  <a href="#" class="menu-item">About</a>
  <a href="#" class="menu-item">Services</a>
  <a href="#" class="menu-item">Contact</a>
</nav>

.menu-container {
  display: flex; /* aktiviert das Flex-Layout */
  justify-content: space-between; /* richtet die Menüeinträge rechts und links aus */
  align-items: center; /* richtet die Menüeinträge vertikal mittig aus */
}

/* Fügt einen Menü-Button für kleine Bildschirme hinzu */
.menu-container::before {
  content: "Menu"; /* Text auf dem Button */
  display: none; /* blendet den Button standardmäßig aus */
}

/* Wenn der Bildschirm schmaler als 600px ist */
@media (max-width: 600px) {
  .menu-container {
    flex-wrap: wrap; /* Lässt die Elemente auf mehrere Zeilen umbrechen */
    justify-content: center; /* Zentriert die Elemente horizontal */
  }
  .menu-item {
    flex-basis: 100%; /* Nimmt die volle verfügbare Breite ein */
    text-align: center; /* Zentriert den Text */
  }
  .menu-container::before {
    display: block; /* Zeigt den Menü-Button an */
  }
}

In diesem Beispiel liegt das Menü horizontal und wird auf breiteren Bildschirmen nach links und rechts ausgerichtet (Standard). Auf kleinen Bildschirmen (unter 600px Breite) sind die Einträge zentriert und brechen auf mehrere Zeilen um, dazu kommt ein Button „Menü“, der das Menü per JavaScript oder einem Werkzeug deiner Wahl öffnet und schließt. Wenn du ein ausführlicheres Beispiel für ein Flexbox-Menü suchst: dazu habe ich einen eigenen Artikel geschrieben.

Fazit

Mit dem CSS-Modul Flexbox baust du ohne Umwege flexible, anpassungsfähige Layouts für deine HTML-Elemente. Eigenschaften wie display, justify-content, align-items und flex richten die Elemente eines Flex-Containers effizient aus und ordnen sie.

Besonders stark ist Flexbox bei Inhaltsrastern, Menüs und responsiven Formularen, weil es den verfügbaren Platz nach dem tatsächlichen Bedarf des Layouts verteilt. Ein Allheilmittel für jedes Layoutproblem ist es nicht, aber es löst viele der üblichen Fälle. Häufig kommt es zusammen mit anderen Layouttechniken wie Grid Layout oder Layout-Frameworks wie Bootstrap zum Einsatz.

Flexbox ist ein mächtiges Werkzeug für Webentwickler, um flexible Layouts für Websites und Anwendungen zu bauen. Wer seine Eigenschaften und Grundlagen verstanden hat, holt am meisten heraus. Und vor dem Einsatz im Projekt lohnt der Blick auf die Browser-Unterstützung.

Diese Kompatibilität lässt sich beim Build automatisieren: PostCSS ergänzt die Hersteller-Präfixe anhand der Browserliste, die du ansprichst. Die Einrichtung steht im Webpack-5-Guide, samt der Falle last 2 versions, die den Internet Explorer wieder hereinholt und das CSS mit toten Präfixen aufbläht.