Dokumentacja CSS z przykładami: Flexbox

Q: Co oznacza flex: 1?

flex: 1 to skrót od flex: 1 1 0%: element może rosnąć (flex-grow: 1), może się kurczyć (flex-shrink: 1) i zaczyna od rozmiaru zero (flex-basis: 0%). Elementy, które wszystkie mają flex: 1, dzielą wolne miejsce po równo, więc mają tę samą szerokość, chyba że ich treść się nie mieści.

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

justify-content ustawia elementy wzdłuż osi głównej (w rzędzie w poziomie), a align-items wzdłuż osi poprzecznej (w rzędzie w pionie). Przy flex-direction: column osie się zamieniają, więc justify-content działa w pionie.

Q: Dlaczego mój element flex wystaje z kontenera?

Element flex ma domyślnie min-width: auto, więc nie chce się skurczyć poniżej szerokości swojego najdłuższego słowa albo najszerszego dziecka. Ustaw na elemencie min-width: 0 (albo overflow: hidden), żeby mógł się skurczyć, na przykład żeby zadziałało text-overflow: ellipsis.

Q: Czy flexbox działa na elementach liniowych, takich jak span?

Tak. Każdy element z display: flex jest kontenerem flex, a jego dzieci stają się elementami flex bez względu na ich własną wartość display, więc dzieci przestają być liniowe i przyjmują szerokość, wysokość i margines jak bloki.

Co robi display: flex

Ustaw display: flex na rodzicu, a jego bezpośrednie dzieci ustawią się w rzędzie, obok siebie, i rozciągną do tej samej wysokości. Ta jedna deklaracja zastępuje float, inline-block i większość sztuczek z pozycjonowaniem przy układaniu rzędu elementów.

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

W pierwszym pudełku każdy div zajmuje całą linię. W drugim trzy elementy stoją w jednym rzędzie, każdy tylko tak szeroki jak jego treść, a One i Three rozciągają się do wysokości Two. Zmienił się tylko rodzic: display: flex ustawia się na kontenerze, nigdy na elementach.

Edytor flexboxa na żywo

Wybierz wartości i obserwuj, jak elementy się przesuwają. Linia kodu pod pudełkiem to CSS dla tego, co widzisz, a lista pod nią pokazuje, gdzie przeglądarka naprawdę umieściła każdy element, zmierzone przez 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>

Co warto wypróbować:

justify-content: space-between: element 1 ląduje na x 0, a element 3 dotyka przeciwnej krawędzi.
align-items: center: trzy elementy zachowują własne wysokości, a ich środki się wyrównują. Przy domyślnym stretch element 1 nie ma własnej wysokości i wypełnia całe 170px kontenera.
flex-direction: column: teraz justify-content przesuwa elementy w pionie, a align-items w poziomie. Obie właściwości podążają za osiami, a nie za ekranem.

Oś główna i oś poprzeczna

Każdy kontener flex ma dwie osie. Oś główna to kierunek, w którym płyną elementy, ustawiany przez flex-direction. Oś poprzeczna biegnie w poprzek niej.

`flex-direction`	Oś główna	Oś poprzeczna	`justify-content` przesuwa elementy	`align-items` przesuwa elementy
`row` (domyślnie)	pozioma, w kolejności czytania	pionowa	w poziomie	w pionie
`row-reverse`	pozioma, odwrócona	pionowa	w poziomie	w pionie
`column`	pionowa, od góry do dołu	pozioma	w pionie	w poziomie
`column-reverse`	pionowa, od dołu do góry	pozioma	w pionie	w poziomie

Na stronie pisanej od prawej do lewej (dir="rtl") row zaczyna się przy prawej krawędzi, bo oś główna podąża za kierunkiem pisania.

Właściwości kontenera

Te właściwości ustawia się na elemencie z display: flex:

Właściwość	Co robi	Domyślnie
`flex-direction`	Rząd albo kolumna i w którą stronę	`row`
`flex-wrap`	Czy elementy przechodzą do nowej linii, gdy zabraknie miejsca	`nowrap`
`flex-flow`	Skrót dla `flex-direction` i `flex-wrap`	`row nowrap`
`justify-content`	Położenie i odstępy wzdłuż osi głównej	`normal` (działa jak `flex-start`)
`align-items`	Położenie elementów wzdłuż osi poprzecznej	`normal` (działa jak `stretch`)
`align-content`	Odstępy między liniami, gdy elementy się zawijają	`normal`
`gap`	Odstęp między elementami (`row-gap`, `column-gap`)	`0`

justify-content i align-items mają własną stronę ze wszystkimi wartościami: justify-content i align-items. Zawijanie i kierunek omawia strona o flex-wrap.

Właściwości elementów: flex-grow, flex-shrink, flex-basis

Te właściwości ustawia się na dzieciach i decydują one, jak dzielą szerokość kontenera:

flex-basis: rozmiar, od którego element zaczyna, zanim wolne miejsce zostanie rozdzielone (auto oznacza "użyj mojej szerokości albo treści").
flex-grow: ile udziałów pozostałego miejsca bierze element. 0 oznacza, że nigdy nie rośnie.
flex-shrink: ile element oddaje, gdy brakuje miejsca. 0 oznacza, że nigdy się nie kurczy.

Skrót flex ustawia wszystkie trzy:

Piszesz	Co oznacza	Zachowanie
`flex: initial` (domyślnie)	`0 1 auto`	Rozmiar treści, może się kurczyć, nigdy nie rośnie
`flex: 1`	`1 1 0%`	Zaczyna od zera i bierze równy udział w miejscu
`flex: auto`	`1 1 auto`	Rozmiar treści plus udział w pozostałym miejscu
`flex: none`	`0 0 auto`	Dokładnie jego treść albo szerokość, nigdy nie rośnie ani się nie kurczy
`flex: 2`	`2 1 0%`	Dwa razy większy udział niż element z `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>

Każdy rząd ma 480px szerokości wewnątrz paddingu, a dwa odstępy po 8px zostawiają elementom 464px. Wypisane szerokości pokazują, jak je rozdzielono: po około 155px w pierwszym rzędzie, 116 + 232 + 116 w drugim (element z flex: 2 dostaje dwa razy większy udział niż każdy sąsiad) i 100 + 372 w trzecim, gdzie element z flex: none zachowuje swoją szerokość, a drugi bierze całą resztę.

Prawdziwe układy z flexboxem

Nagłówek z logo na początku i odnośnikami na końcu to najczęstszy układ flex. margin-inline-start: auto na jednym elemencie zjada całe wolne miejsce przed nim i spycha go razem ze wszystkim, co po nim następuje, na koniec:

<!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 wyrównuje większy tekst logo z odnośnikami, a gap rozsuwa odnośniki bez marginesów, które trzeba by kasować na ostatnim.

Drugi codzienny wzorzec to wiersz z mediami: ikona o stałym rozmiarze i tekst, który bierze resztę i zawija się we własnej kolumnie.

<!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 to gwarancja. Elementy flex domyślnie się kurczą, więc jeśli usuniesz tę właściwość z koła, a z tekstu usuniesz też flex: 1, akapit ściśnie koło do szerokości około 23px: powstanie owal. Do wyśrodkowania jednej rzeczy w pudełku flexbox potrzebuje dwóch linii (justify-content: center; align-items: center); strona o wyśrodkowaniu diva porównuje to z innymi sposobami.

order i dostępność

Właściwość order i kierunki -reverse zmieniają miejsce, w którym elementy się pojawiają, a nie ich miejsce w HTML. Czytniki ekranu i klawisz Tab nadal podążają za kolejnością w HTML, więc osoba korzystająca z klawiatury może przeskoczyć z pierwszego odnośnika na ekranie do ostatniego. Używaj ich tylko do dekoracji; gdy kolejność coś znaczy, zmień HTML.

Flexbox czy grid

Flexbox działa w jednym kierunku naraz: elementy w rzędzie dopasowują rozmiar do treści, a druga linia (przy zawijaniu) nie wyrównuje się z pierwszą. Grid działa w dwóch: definiujesz kolumny i wiersze, a elementy się w nie wpasowują. Pasek nawigacji, pasek narzędzi albo wiersz formularza to flexbox; galeria albo strona z panelem bocznym to grid.

Częste błędy

display: flex na elemencie zamiast na rodzicu. display: flex dostaje kontener; jego dzieci to elementy.
Oczekiwanie, że align-items przesunie elementy w pionie bez wysokości. Jeśli kontener jest tylko tak wysoki jak jego najwyższy element, nie ma miejsca na przesunięcie. Nadaj kontenerowi wysokość; w przeciwnym razie właściwość działa, tylko nie ma nic do zrobienia.
Tekst, który wystaje zamiast się kurczyć. Elementy flex mają min-width: auto. Dodaj min-width: 0 do elementu, który ma się kurczyć.
Używanie flex: 1 i zdziwienie, że szerokości się różnią. Elementy z flex: 1 dzielą miejsce po równo, ale element, którego treść się nie mieści (długi adres URL, obraz), nie skurczy się poniżej niej. To też naprawia min-width: 0.
Marginesy między elementami. Użyj gap na kontenerze; działa tylko między elementami.
Niepotrzebne zagnieżdżanie flex. Elementami flex są tylko bezpośrednie dzieci. Wnuki podlegają zwykłemu układowi, chyba że ich własny rodzic też ma display: flex.

Najczęściej zadawane pytania

Co robi display: flex?

Zamienia element w kontener flex. Jego bezpośrednie dzieci stają się elementami flex i domyślnie układają się w rzędzie, obok siebie, rozciągnięte do tej samej wysokości, a właściwości takie jak justify-content, align-items i gap sterują tym, jak dzielą miejsce.

Co oznacza flex: 1?

flex: 1 to skrót od flex: 1 1 0%: element może rosnąć (flex-grow: 1), może się kurczyć (flex-shrink: 1) i zaczyna od rozmiaru zero (flex-basis: 0%). Elementy, które wszystkie mają flex: 1, dzielą wolne miejsce po równo, więc mają tę samą szerokość, chyba że ich treść się nie mieści.

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

justify-content ustawia elementy wzdłuż osi głównej (w rzędzie w poziomie), a align-items wzdłuż osi poprzecznej (w rzędzie w pionie). Przy flex-direction: column osie się zamieniają, więc justify-content działa w pionie.

Flexbox czy grid?

Używaj flexboxa dla pojedynczego rzędu albo kolumny, których elementy dopasowują rozmiar do treści: pasków nawigacji, grup przycisków, etykiety obok pola. Używaj grida, gdy chcesz wierszy i kolumn wyrównanych względem siebie, na przykład siatki kart albo układu strony.

Dlaczego mój element flex wystaje z kontenera?

Element flex ma domyślnie min-width: auto, więc nie chce się skurczyć poniżej szerokości swojego najdłuższego słowa albo najszerszego dziecka. Ustaw na elemencie min-width: 0 (albo overflow: hidden), żeby mógł się skurczyć, na przykład żeby zadziałało text-overflow: ellipsis.

Czy flexbox działa na elementach liniowych, takich jak span?

Tak. Każdy element z display: flex jest kontenerem flex, a jego dzieci stają się elementami flex bez względu na ich własną wartość display, więc dzieci <span> przestają być liniowe i przyjmują szerokość, wysokość i margines jak bloki.

Powiązane zagadnienia