Ausführbare CSS-Docs: Flex Wrap

Q: Was ist der Unterschied zwischen flex-direction row und column?

row (der Standard) setzt Items in Schreibrichtung nebeneinander, und column stapelt sie von oben nach unten. Die Hauptachse dreht sich mit, also wirkt justify-content in einer Spalte vertikal und align-items horizontal.

Q: Was ist flex-flow?

Eine Kurzschreibweise für flex-direction und flex-wrap in einer Deklaration: flex-flow: row wrap; ist dasselbe wie flex-direction: row; flex-wrap: wrap;.

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

align-items platziert Items innerhalb ihrer Zeile. align-content platziert die Zeilen selbst im Container, spielt also nur eine Rolle, wenn der Container flex-wrap: wrap hat und höher als seine Zeilen ist.

flex-wrap: eine Zeile oder so viele wie nötig

Standardmäßig hält ein Flex-Container alle seine Items in einer Zeile (flex-wrap: nowrap) und schrumpft sie, bis sie passen. flex-wrap: wrap lässt sie ihre Größe behalten und stattdessen in die nächste Zeile wandern:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-wrap</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; gap: 8px; width: 340px; padding: 8px; background: #e5e7eb; margin-bottom: 12px; }
    .item { width: 100px; height: 36px; background: #2563eb; color: white; }
    .wrap { flex-wrap: wrap; }
  </style>
</head>
<body>
  <code>flex-wrap: nowrap (default)</code>
  <div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <code>flex-wrap: wrap</code>
  <div class="box wrap"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <script>
    document.querySelectorAll('.box').forEach((box) => {
      box.children[0].textContent = Math.round(box.children[0].getBoundingClientRect().width) + 'px wide';
    });
  </script>
</body>
</html>

Jedes Item will 100px, fünf davon in einer 340px breiten Box. Fünf Items und vier Lücken von 8px brauchen 532px, also wird ohne Umbruch jedes Item auf etwa 62px zusammengedrückt, weil Flex-Items standardmäßig schrumpfen. Mit wrap bleiben sie 100px breit: Drei passen in die erste Zeile, und die anderen zwei wandern in eine zweite.

Werte von flex-wrap

Wert	Was passiert
`nowrap` (Standard)	Eine Zeile. Items schrumpfen und laufen aus dem Container heraus, sobald sie nicht weiter schrumpfen können
`wrap`	Items, die nicht passen, beginnen darunter eine neue Zeile
`wrap-reverse`	Genauso, aber neue Zeilen stapeln sich nach oben: Die erste Zeile liegt unten

Items beim Umbrechen zusehen

Zieh am Schieberegler, um die Breite des Containers zu ändern. Die Anzeige zählt die Zeilen und sagt, wie viele Items in jeder stehen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrap slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    #box { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #e5e7eb; margin: 10px 0; }
    .item { width: 90px; height: 40px; background: #16a34a; color: white; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <label>container width <input id="w" type="range" min="120" max="620" value="400"> <span id="wv"></span></label>
  <div id="box"></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    for (let i = 1; i <= 6; i++) box.insertAdjacentHTML('beforeend', '<div class="item">' + i + '</div>');
    const update = () => {
      const w = document.getElementById('w').value;
      box.style.width = w + 'px';
      document.getElementById('wv').textContent = w + 'px';
      const lines = {};
      [...box.children].forEach((c) => { const top = Math.round(c.getBoundingClientRect().top); lines[top] = (lines[top] || 0) + 1; });
      const counts = Object.values(lines);
      document.getElementById('out').textContent = counts.length + ' line(s): ' + counts.join(' + ') + ' items';
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

Bei 400px passen vier Items à 90px und drei Lücken à 8px (384px) in eine Zeile, also ergibt sich 4 + 2. Zieh Richtung 620px, und alle sechs passen in eine Zeile; zieh Richtung 120px, und jedes Item bekommt eine eigene Zeile.

flex-direction: Zeile oder Spalte

flex-direction legt die Richtung fest, in der Items fließen, und das ist die Hauptachse:

Wert	Items laufen	Erstes Item
`row` (Standard)	nebeneinander, in Schreibrichtung	am Zeilenanfang
`row-reverse`	nebeneinander, umgekehrt	am Zeilenende
`column`	gestapelt, von oben nach unten	oben
`column-reverse`	gestapelt, von unten nach oben	unten

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-direction</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .box { display: flex; gap: 4px; padding: 6px; background: #e5e7eb; width: 160px; height: 110px; margin-top: 4px; }
    .box div { background: #2563eb; color: white; padding: 4px 10px; }
  </style>
</head>
<body>
  <div class="grid">
    <div><code>row</code><div class="box" style="flex-direction: row"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>row-reverse</code><div class="box" style="flex-direction: row-reverse"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column</code><div class="box" style="flex-direction: column"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column-reverse</code><div class="box" style="flex-direction: column-reverse"><div>1</div><div>2</div><div>3</div></div></div>
  </div>
</body>
</html>

In den beiden row-Boxen strecken sich die Items auf die volle Höhe der Box, weil align-items: stretch quer zur Zeile wirkt. In den column-Boxen strecken sie sich aus demselben Grund stattdessen auf die volle Breite. Die Achsen haben sich gedreht, und jede Ausrichtungseigenschaft hat sich mitgedreht (die Seite zu justify-content zeigt das im Detail).

flex-flow: beides in einer Zeile

flex-flow ist die Kurzschreibweise für flex-direction, dann flex-wrap:

.cards { flex-flow: row wrap; }      /* flex-direction: row; flex-wrap: wrap; */
.stack { flex-flow: column nowrap; } /* flex-direction: column; flex-wrap: nowrap; */

Responsive Karten mit wrap und ohne Media Query

Gib jedem Item mit flex: 1 1 180px eine Startgröße und lass die Zeile umbrechen. Jedes Item wächst, bis es seine Zeile füllt, und wenn in eine Zeile kein weiteres 180px-Item passt, bricht das nächste um:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrapping cards</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: flex; flex-wrap: wrap; gap: 12px; }
    .card {
      flex: 1 1 180px; /* grow, shrink, start at 180px */
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f9fafb;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">Four</div>
    <div class="card">Five</div>
  </div>
</body>
</html>

In einer etwa 800px breiten Vorschau passen drei Karten in die erste Zeile (je etwa 253px), und die letzten zwei teilen sich die zweite Zeile, wo jede auf etwa 386px wächst. So funktioniert Flexbox: Jede Zeile verteilt ihren eigenen Platz, also werden Karten in einer kurzen letzten Zeile breiter als die darüber. Soll die letzte Karte genauso breit bleiben wie die anderen, nimm stattdessen Grid mit repeat(auto-fill, minmax(180px, 1fr)) (siehe die Seite zu Grid).

align-content: Abstände zwischen den Zeilen

Bricht ein Container um und ist er höher als seine Zeilen, entscheidet align-content, wohin die Zeilen kommen. Es nimmt dieselben Werte wie justify-content, plus stretch:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-content</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 160px; background: #e5e7eb; }
    .box div { width: 60px; height: 30px; background: #f59e0b; }
    .row { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>align-content: flex-start</code><div class="box" style="align-content: flex-start"><div></div><div></div><div></div><div></div><div></div></div></div>
    <div><code>align-content: space-between</code><div class="box" style="align-content: space-between"><div></div><div></div><div></div><div></div><div></div></div></div>
  </div>
</body>
</html>

In der ersten Box sitzen beide Zeilen oben. In der zweiten sitzt die erste Zeile oben und die zweite unten, mit der ganzen übrigen Höhe dazwischen.

Umgekehrte Reihenfolge und Barrierefreiheit

row-reverse, column-reverse und wrap-reverse ändern nur, wo Items gezeichnet werden. Screenreader und die Tab-Taste folgen weiterhin der HTML-Reihenfolge, also bewegt sich ein Tastaturnutzer in der entgegengesetzten Richtung zu dem, was er sieht, durch die Items. Kehr die Reihenfolge nur für einen optischen Effekt um; wenn sie Bedeutung trägt, ändere sie im HTML.

Häufige Fehler

Items, die schrumpfen, statt umzubrechen. Items mit flex: 1 starten bei einer flex-basis von 0 und quetschen sich in eine Zeile. Gib ihnen eine echte Basis, etwa flex: 1 1 200px.
flex-wrap an die Items setzen. Es gehört an den Flex-Container.
align-items nutzen, um umgebrochene Zeilen zu verteilen. Das richtet Items innerhalb jeder Zeile aus; die Zeilen selbst bewegst du mit align-content.
Ein einsames letztes Item, das über die ganze Zeile gestreckt ist. Das ist flex-grow in einer Zeile mit nur einem Item. Nimm Grid, wenn jede Karte gleich breit sein muss.
Erwarten, dass flex-direction: column eine Höhe füllt. Ein Spalten-Container ist nur so hoch wie sein Inhalt, außer du gibst ihm eine height, also hat justify-content keinen Platz zum Arbeiten.

Häufig gestellte Fragen

Was macht flex-wrap: wrap?

Es lässt Flex-Items in eine neue Zeile wandern, wenn sie nicht in eine Reihe passen. Mit dem Standard nowrap bleiben die Items in einer Zeile und schrumpfen oder laufen aus dem Container heraus, wenn sie nicht weiter schrumpfen können.

Warum funktioniert flex-wrap nicht?

Umgebrochen wird nur, wenn die Startgrößen der Items zusammen größer als der Container sind. Items mit flex: 1 starten bei einer flex-basis von 0 und brechen deshalb nie um; gib ihnen eine echte Startgröße (flex: 1 1 200px oder width: 200px). Prüf auch, ob flex-wrap am Flex-Container steht und nicht an den Items.

Was ist der Unterschied zwischen flex-direction row und column?

row (der Standard) setzt Items in Schreibrichtung nebeneinander, und column stapelt sie von oben nach unten. Die Hauptachse dreht sich mit, also wirkt justify-content in einer Spalte vertikal und align-items horizontal.

Was ist flex-flow?

Eine Kurzschreibweise für flex-direction und flex-wrap in einer Deklaration: flex-flow: row wrap; ist dasselbe wie flex-direction: row; flex-wrap: wrap;.

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

align-items platziert Items innerhalb ihrer Zeile. align-content platziert die Zeilen selbst im Container, spielt also nur eine Rolle, wenn der Container flex-wrap: wrap hat und höher als seine Zeilen ist.

Verwandte Konzepte