Dokumentacja CSS z przykładami: Flex wrap

Q: Czym różni się flex-direction row od column?

row (domyślnie) ustawia elementy obok siebie w kierunku pisania, a column układa je od góry do dołu. Oś główna obraca się razem z tym, więc w kolumnie justify-content działa w pionie, a align-items w poziomie.

Q: Co to jest flex-flow?

Skrót dla flex-direction i flex-wrap w jednej deklaracji: flex-flow: row wrap; to to samo co flex-direction: row; flex-wrap: wrap;.

Q: Czym różni się align-items od align-content?

align-items ustawia elementy wewnątrz ich linii. align-content ustawia same linie wewnątrz kontenera, więc ma znaczenie tylko wtedy, gdy kontener ma flex-wrap: wrap i jest wyższy niż jego linie.

flex-wrap: jedna linia albo tyle, ile trzeba

Domyślnie kontener flex trzyma wszystkie elementy w jednej linii (flex-wrap: nowrap) i kurczy je, żeby się zmieściły. flex-wrap: wrap pozwala im zachować rozmiar i przejść do następnej linii:

<!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>

Każdy element chce mieć 100px, a jest ich pięć w pudełku o szerokości 340px. Pięć elementów i cztery odstępy po 8px wymagają 532px, więc bez zawijania każdy element jest ściśnięty do około 62px, bo elementy flex domyślnie się kurczą. Z wrap zostają przy 100px: trzy mieszczą się w pierwszej linii, a pozostałe dwa przechodzą do drugiej.

Wartości flex-wrap

Wartość	Co się dzieje
`nowrap` (domyślnie)	Jedna linia. Elementy się kurczą, a gdy nie mogą już bardziej, wystają z kontenera
`wrap`	Elementy, które się nie mieszczą, zaczynają nową linię poniżej
`wrap-reverse`	To samo, ale nowe linie układają się w górę: pierwsza linia jest na dole

Zobacz, jak elementy się zawijają

Przeciągnij suwak, żeby zmienić szerokość kontenera. Komunikat liczy linie i podaje, ile elementów jest w każdej:

<!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>

Przy 400px cztery elementy po 90px i trzy odstępy po 8px (384px) mieszczą się w linii, więc dostajesz 4 + 2. Przeciągnij w stronę 620px, a wszystkie sześć zmieści się w jednej linii; przeciągnij w stronę 120px, a każdy element dostanie osobną linię.

flex-direction: rząd albo kolumna

flex-direction ustawia kierunek, w którym płyną elementy, czyli oś główną:

Wartość	Elementy układają się	Pierwszy element
`row` (domyślnie)	obok siebie, w kierunku pisania	na początku linii
`row-reverse`	obok siebie, w odwrotnej kolejności	na końcu linii
`column`	jeden pod drugim, od góry do dołu	na górze
`column-reverse`	jeden nad drugim, od dołu do góry	na dole

<!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>

W dwóch pudełkach row elementy rozciągają się na pełną wysokość pudełka, bo align-items: stretch działa w poprzek rzędu. W pudełkach column z tego samego powodu rozciągają się na pełną szerokość. Osie się obróciły, a wszystkie właściwości wyrównania obróciły się razem z nimi (szczegółowo pokazuje to strona o justify-content).

flex-flow: oba w jednej linii

flex-flow to skrót dla flex-direction, a potem flex-wrap:

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

Responsywne karty z wrap i bez media query

Nadaj każdemu elementowi rozmiar początkowy przez flex: 1 1 180px i pozwól rzędowi się zawijać. Każdy element rośnie, żeby wypełnić swoją linię, a gdy w linii nie mieści się kolejny element 180px, następny się zawija:

<!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>

W podglądzie o szerokości około 800px w pierwszej linii mieszczą się trzy karty (po około 253px), a dwie ostatnie dzielą drugą linię, gdzie każda rośnie do około 386px. Tak działa flexbox: każda linia dzieli własne miejsce, więc karty w krótkiej ostatniej linii są szersze niż te wyżej. Jeśli chcesz, żeby ostatnia karta miała tę samą szerokość co pozostałe, użyj zamiast tego grida z repeat(auto-fill, minmax(180px, 1fr)) (zobacz stronę o grid).

align-content: rozmieszczenie linii

Gdy kontener zawija elementy i jest wyższy niż jego linie, align-content decyduje, gdzie trafiają linie. Przyjmuje te same wartości co justify-content, a do tego 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>

W pierwszym pudełku obie linie są na górze. W drugim pierwsza linia jest na górze, a druga na dole, z całą wolną wysokością pomiędzy nimi.

Odwrócona kolejność i dostępność

row-reverse, column-reverse i wrap-reverse zmieniają tylko miejsce, w którym elementy są rysowane. Czytniki ekranu i klawisz Tab nadal podążają za kolejnością w HTML, więc osoba korzystająca z klawiatury przechodzi przez elementy w kierunku odwrotnym do tego, co widzi. Odwracaj kolejność tylko dla efektu wizualnego; gdy kolejność niesie znaczenie, zmień ją w HTML.

Częste błędy

Elementy, które się kurczą zamiast zawijać. Elementy z flex: 1 zaczynają od flex-basis równego 0 i ściskają się w jednej linii. Nadaj im prawdziwy rozmiar bazowy, na przykład flex: 1 1 200px.
flex-wrap na elementach. Ta właściwość należy do kontenera flex.
Używanie align-items do rozmieszczania zawiniętych linii. To wyrównuje elementy w każdej linii; same linie przesuwa align-content.
Samotny ostatni element rozciągnięty na cały rząd. To flex-grow w linii z jednym elementem. Użyj grida, jeśli każda karta musi mieć tę samą szerokość.
Oczekiwanie, że flex-direction: column wypełni wysokość. Kontener kolumnowy jest tylko tak wysoki jak jego zawartość, chyba że nadasz mu height, więc justify-content nie ma miejsca do działania.

Najczęściej zadawane pytania

Co robi flex-wrap: wrap?

Pozwala elementom flex przejść do nowej linii, gdy nie mieszczą się w jednym rzędzie. Przy domyślnym nowrap elementy zostają w jednej linii i się kurczą albo wystają z kontenera, jeśli nie mogą się już bardziej skurczyć.

Dlaczego flex-wrap nie działa?

Zawijanie następuje tylko wtedy, gdy rozmiary początkowe elementów sumują się do więcej niż szerokość kontenera. Elementy z flex: 1 zaczynają od flex-basis równego 0, więc nigdy się nie zawijają; nadaj im prawdziwy rozmiar początkowy (flex: 1 1 200px albo width: 200px). Sprawdź też, czy flex-wrap jest na kontenerze flex, a nie na elementach.

Czym różni się flex-direction row od column?

row (domyślnie) ustawia elementy obok siebie w kierunku pisania, a column układa je od góry do dołu. Oś główna obraca się razem z tym, więc w kolumnie justify-content działa w pionie, a align-items w poziomie.

Co to jest flex-flow?

Skrót dla flex-direction i flex-wrap w jednej deklaracji: flex-flow: row wrap; to to samo co flex-direction: row; flex-wrap: wrap;.

Czym różni się align-items od align-content?

align-items ustawia elementy wewnątrz ich linii. align-content ustawia same linie wewnątrz kontenera, więc ma znaczenie tylko wtedy, gdy kontener ma flex-wrap: wrap i jest wyższy niż jego linie.

Powiązane zagadnienia