Ausführbare CSS-Docs: CSS Flexbox

Q: Was bedeutet flex: 1?

flex: 1 ist die Kurzform für flex: 1 1 0%: Das Item darf wachsen (flex-grow: 1), darf schrumpfen (flex-shrink: 1) und startet bei einer Größe von null (flex-basis: 0%). Items, die alle flex: 1 haben, teilen den freien Platz gleichmäßig und werden deshalb gleich breit, außer ihr Inhalt passt nicht hinein.

Q: Was ist der Unterschied zwischen justify-content und align-items?

justify-content platziert Items entlang der Hauptachse (horizontal in einer Zeile), und align-items entlang der Querachse (vertikal in einer Zeile). Mit flex-direction: column tauschen die beiden Achsen, und justify-content wird vertikal.

Q: Warum läuft mein Flex-Item aus seinem Container heraus?

Ein Flex-Item hat standardmäßig min-width: auto und weigert sich deshalb, schmaler als sein längstes Wort oder sein breitestes Kind zu werden. Setz min-width: 0 (oder overflow: hidden) am Item, damit es schrumpfen kann, zum Beispiel damit text-overflow: ellipsis funktioniert.

Q: Funktioniert Flexbox mit Inline-Elementen wie span?

Ja. Jedes Element mit display: flex ist ein Flex-Container, und seine Kinder werden unabhängig von ihrem eigenen display-Wert zu Flex-Items. -Kinder sind dann nicht mehr inline und akzeptieren Breite, Höhe und Margin wie Blöcke.

Was display: flex macht

Setz display: flex an ein Elternelement, und seine direkten Kinder stellen sich in einer Zeile nebeneinander auf und werden auf dieselbe Höhe gestreckt. Diese eine Deklaration ersetzt Floats, inline-block und die meisten Positionierungstricks, um Dinge in einer Reihe anzuordnen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>display flex</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { background: #e5e7eb; padding: 8px; margin-bottom: 12px; }
    .flex { display: flex; gap: 8px; }
    .item { background: #2563eb; color: white; padding: 10px 14px; }
    .tall { padding-block: 24px; }
  </style>
</head>
<body>
  <p>Without flex (normal block layout):</p>
  <div class="box">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
  <p>With display: flex:</p>
  <div class="box flex">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

In der ersten Box nimmt jedes div eine volle Zeile ein. In der zweiten stehen die drei Items in einer Reihe, jedes nur so breit wie sein Inhalt, und One und Three werden auf die Höhe von Two gestreckt. Nur das Elternelement hat sich geändert: display: flex gehört an den Container, nie an die Items.

Flexbox-Playground

Wähl Werte aus und sieh zu, wie sich die Items bewegen. Die Codezeile unter der Box ist das CSS für das, was du siehst, und die Liste darunter zeigt, wo der Browser jedes Item tatsächlich platziert hat, gemessen mit getBoundingClientRect().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flexbox playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
    #box { display: flex; height: 170px; background: #e5e7eb; border: 2px solid #111827; }
    .item { background: #2563eb; color: white; width: 60px; padding: 8px; box-sizing: border-box; }
    .item:nth-child(2) { background: #16a34a; height: 80px; }
    .item:nth-child(3) { background: #f59e0b; height: 50px; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>flex-direction <select data-p="flex-direction"><option>row</option><option>row-reverse</option><option>column</option><option>column-reverse</option></select></label>
    <label>justify-content <select data-p="justify-content"><option>flex-start</option><option>center</option><option>flex-end</option><option>space-between</option><option>space-around</option><option>space-evenly</option></select></label>
    <label>align-items <select data-p="align-items"><option>stretch</option><option>flex-start</option><option>center</option><option>flex-end</option><option>baseline</option></select></label>
    <label>gap <select data-p="gap"><option>0px</option><option>8px</option><option>24px</option></select></label>
  </div>
  <div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <pre id="out"></pre>
  <script>
    const box = document.getElementById('box');
    const selects = document.querySelectorAll('select');
    const update = () => {
      const css = [];
      selects.forEach((s) => { box.style.setProperty(s.dataset.p, s.value); css.push(s.dataset.p + ': ' + s.value + ';'); });
      const b = box.getBoundingClientRect();
      const places = [...box.children].map((el) => {
        const r = el.getBoundingClientRect();
        return el.textContent + ': x ' + Math.round(r.left - b.left - 2) + ', y ' + Math.round(r.top - b.top - 2) + ', ' + Math.round(r.width) + ' x ' + Math.round(r.height);
      });
      document.getElementById('out').textContent = '.box { display: flex; ' + css.join(' ') + ' }\n' + places.join('\n');
    };
    selects.forEach((s) => s.addEventListener('change', update));
    update();
  </script>
</body>
</html>

Zum Ausprobieren:

justify-content: space-between: Item 1 landet bei x 0, und Item 3 berührt den gegenüberliegenden Rand.
align-items: center: Die drei Items behalten ihre eigene Höhe, und ihre Mitten liegen auf einer Linie. Mit dem Standard stretch hat Item 1 keine eigene Höhe und füllt die vollen 170px des Containers.
flex-direction: column: Jetzt bewegt justify-content Items vertikal und align-items horizontal. Die beiden Eigenschaften folgen den Achsen, nicht dem Bildschirm.

Hauptachse und Querachse

Jeder Flex-Container hat zwei Achsen. Die Hauptachse ist die Richtung, in der die Items fließen, festgelegt durch flex-direction. Die Querachse verläuft quer dazu.

`flex-direction`	Hauptachse	Querachse	`justify-content` bewegt Items	`align-items` bewegt Items
`row` (Standard)	horizontal, in Leserichtung	vertikal	horizontal	vertikal
`row-reverse`	horizontal, umgekehrt	vertikal	horizontal	vertikal
`column`	vertikal, von oben nach unten	horizontal	vertikal	horizontal
`column-reverse`	vertikal, von unten nach oben	horizontal	vertikal	horizontal

Auf einer Seite von rechts nach links (dir="rtl") beginnt row am rechten Rand, weil die Hauptachse der Schreibrichtung folgt.

Container-Eigenschaften

Diese gehören an das Element mit display: flex:

Eigenschaft	Was sie macht	Standard
`flex-direction`	Zeile oder Spalte, und in welche Richtung	`row`
`flex-wrap`	Ob Items in eine neue Zeile wandern, wenn der Platz ausgeht	`nowrap`
`flex-flow`	Kurzschreibweise für `flex-direction` und `flex-wrap`	`row nowrap`
`justify-content`	Platzierung und Abstände entlang der Hauptachse	`normal` (wirkt wie `flex-start`)
`align-items`	Platzierung der Items entlang der Querachse	`normal` (wirkt wie `stretch`)
`align-content`	Abstände zwischen Zeilen, wenn Items umbrechen	`normal`
`gap`	Abstand zwischen Items (`row-gap`, `column-gap`)	`0`

justify-content und align-items haben eine eigene Seite mit jedem Wert: justify-content und align-items. Umbruch und Richtung stehen auf der Seite zu flex-wrap.

Item-Eigenschaften: flex-grow, flex-shrink, flex-basis

Diese gehören an die Kinder und entscheiden, wie sie sich die Breite des Containers teilen:

flex-basis: die Größe, von der ein Item startet, bevor freier Platz verteilt wird (auto bedeutet „nimm meine Breite oder meinen Inhalt“).
flex-grow: wie viele Anteile vom übrigen Platz das Item bekommt. 0 bedeutet, es wächst nie.
flex-shrink: wie viel das Item abgibt, wenn nicht genug Platz da ist. 0 bedeutet, es schrumpft nie.

Die Kurzschreibweise flex setzt alle drei:

Du schreibst	Das bedeutet	Verhalten
`flex: initial` (Standard)	`0 1 auto`	Größe des Inhalts, darf schrumpfen, wächst nie
`flex: 1`	`1 1 0%`	Startet bei null und bekommt einen gleichen Anteil am Platz
`flex: auto`	`1 1 auto`	Größe des Inhalts plus ein Anteil am übrigen Platz
`flex: none`	`0 0 auto`	Genau sein Inhalt oder seine Breite, wächst und schrumpft nie
`flex: 2`	`2 1 0%`	Doppelter Anteil eines Items mit `flex: 1`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex grow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; width: 480px; background: #e5e7eb; padding: 8px; margin-bottom: 8px; }
    .row div { background: #2563eb; color: white; padding: 8px 0; text-align: center; }
    .one { flex: 1; }
    .row .two { flex: 2; background: #16a34a; }
    .row .none { flex: none; width: 100px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row"><div class="one">flex: 1</div><div class="one">flex: 1</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="one">flex: 1</div><div class="two">flex: 2</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="none">flex: none</div><div class="one">flex: 1</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.row')].map((row) =>
      [...row.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(' + ')
    ).join(' | ');
  </script>
</body>
</html>

Jede Zeile ist innerhalb ihres Paddings 480px breit, und die zwei Lücken von 8px lassen 464px für die Items. Die ausgegebenen Breiten zeigen, wie verteilt wurde: etwa 155px pro Item in der ersten Zeile, 116 + 232 + 116 in der zweiten (das Item mit flex: 2 bekommt den doppelten Anteil jedes Nachbarn) und 100 + 372 in der dritten, wo das Item mit flex: none seine Breite behält und das andere Item den ganzen Rest nimmt.

Echte Layouts mit Flexbox

Ein Header mit Logo am Anfang und Links am Ende ist das häufigste Flex-Layout. margin-inline-start: auto an einem Item schluckt den ganzen freien Platz davor und schiebt dieses Item und alles danach ans Ende:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nav bar</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    nav { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #111827; }
    nav a { color: white; text-decoration: none; }
    .logo { font-weight: 700; font-size: 20px; }
    .push { margin-inline-start: auto; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <nav>
    <a class="logo" href="#">Logo</a>
    <a class="push" href="#">Docs</a>
    <a href="#">Pricing</a>
    <a class="cta" href="#">Sign up</a>
  </nav>
</body>
</html>

align-items: center richtet den größeren Logotext an den Links aus, und gap setzt die Abstände zwischen den Links, ohne dass am letzten ein Margin rückgängig gemacht werden muss.

Ein zweites Alltagsmuster ist eine Medienzeile: ein Icon mit fester Größe und Text, der den Rest nimmt und in seiner eigenen Spalte umbricht.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media object</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .media { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; }
    .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #16a34a; }
    .text { flex: 1; min-width: 0; margin: 0; }
  </style>
</head>
<body>
  <div class="media">
    <div class="avatar"></div>
    <p class="text">This text wraps next to the circle. However long it gets, the circle keeps its 48px size because it has flex: none.</p>
  </div>
</body>
</html>

flex: none ist die Garantie. Flex-Items schrumpfen standardmäßig, also drückt der Absatz den Kreis auf etwa 23px Breite zusammen, wenn du es am Kreis entfernst und außerdem flex: 1 am Text: ein Oval. Um ein Element in einer Box zu zentrieren, braucht Flexbox zwei Zeilen (justify-content: center; align-items: center); die Seite div zentrieren vergleicht das mit den anderen Wegen.

order und Barrierefreiheit

Die Eigenschaft order und die -reverse-Richtungen ändern, wo Items erscheinen, nicht wo sie im HTML stehen. Screenreader und die Tab-Taste folgen weiterhin der HTML-Reihenfolge, sodass ein Tastaturnutzer vom ersten Link auf dem Bildschirm zum letzten springen kann. Nutze sie nur zur Dekoration; wenn die Reihenfolge etwas bedeutet, ändere das HTML.

Flexbox oder Grid

Flexbox arbeitet immer in einer Richtung: Items in einer Zeile bekommen ihre Größe aus dem Inhalt, und eine zweite Zeile (mit Umbruch) ist nicht an der ersten ausgerichtet. Grid arbeitet in zwei: Du definierst Spalten und Zeilen, und die Items rasten darin ein. Eine Navigationsleiste, eine Toolbar oder eine Formularzeile ist Flexbox; eine Galerie oder eine Seite mit Seitenleiste ist Grid.

Häufige Fehler

display: flex am Item statt am Elternelement. Der Container bekommt display: flex; seine Kinder sind die Items.
Erwarten, dass align-items Items ohne Höhe vertikal bewegt. Ist der Container nur so hoch wie sein höchstes Item, gibt es keinen Platz zum Bewegen. Gib dem Container eine Höhe, oder akzeptiere, dass es funktioniert und nur nichts zu tun hat.
Text, der überläuft, statt zu schrumpfen. Flex-Items haben min-width: auto. Füge min-width: 0 an dem Item hinzu, das schrumpfen soll.
flex: 1 verwenden und sich über unterschiedliche Breiten wundern. Items mit flex: 1 teilen den Platz gleichmäßig, aber ein Item, dessen Inhalt nicht passt (eine lange URL, ein Bild), schrumpft nicht darunter. min-width: 0 behebt auch das.
Margins zwischen Items. Nimm gap am Container; es wirkt nur zwischen den Items.
Unnötig verschachteltes Flex. Nur direkte Kinder sind Flex-Items. Enkel folgen dem normalen Layout, außer ihr eigenes Elternelement hat auch display: flex.

Häufig gestellte Fragen

Was macht display: flex?

Es macht ein Element zu einem Flex-Container. Seine direkten Kinder werden zu Flex-Items und stehen standardmäßig in einer Zeile nebeneinander, auf dieselbe Höhe gestreckt. Eigenschaften wie justify-content, align-items und gap steuern, wie sie sich den Platz teilen.

Was bedeutet flex: 1?

flex: 1 ist die Kurzform für flex: 1 1 0%: Das Item darf wachsen (flex-grow: 1), darf schrumpfen (flex-shrink: 1) und startet bei einer Größe von null (flex-basis: 0%). Items, die alle flex: 1 haben, teilen den freien Platz gleichmäßig und werden deshalb gleich breit, außer ihr Inhalt passt nicht hinein.

Was ist der Unterschied zwischen justify-content und align-items?

justify-content platziert Items entlang der Hauptachse (horizontal in einer Zeile), und align-items entlang der Querachse (vertikal in einer Zeile). Mit flex-direction: column tauschen die beiden Achsen, und justify-content wird vertikal.

Soll ich Flexbox oder Grid nehmen?

Nimm Flexbox für eine einzelne Zeile oder Spalte, deren Items ihre Größe aus dem Inhalt bekommen: Navigationsleisten, Button-Gruppen, ein Label neben einem Eingabefeld. Nimm Grid, wenn Zeilen und Spalten aneinander ausgerichtet sein sollen, etwa bei einem Kartenraster oder einem Seitenlayout.

Warum läuft mein Flex-Item aus seinem Container heraus?

Ein Flex-Item hat standardmäßig min-width: auto und weigert sich deshalb, schmaler als sein längstes Wort oder sein breitestes Kind zu werden. Setz min-width: 0 (oder overflow: hidden) am Item, damit es schrumpfen kann, zum Beispiel damit text-overflow: ellipsis funktioniert.

Funktioniert Flexbox mit Inline-Elementen wie span?

Ja. Jedes Element mit display: flex ist ein Flex-Container, und seine Kinder werden unabhängig von ihrem eigenen display-Wert zu Flex-Items. <span>-Kinder sind dann nicht mehr inline und akzeptieren Breite, Höhe und Margin wie Blöcke.

Verwandte Konzepte