Dokumentacja CSS z przykładami: Justify Content

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

justify-content rozkłada elementy wzdłuż osi głównej, czyli w kierunku, w którym płyną (poziomo przy flex-direction: row). align-items ustawia je wzdłuż osi poprzecznej (pionowo w wierszu). W kolumnie obie się zamieniają: justify-content działa pionowo.

Q: Czym różnią się space-between, space-around i space-evenly?

space-between nie dodaje miejsca przed pierwszym elementem ani po ostatnim, a resztę dzieli między elementy. space-around daje każdemu elementowi tyle samo miejsca po obu stronach, więc krawędzie dostają pół odstępu. space-evenly sprawia, że każdy odstęp jest równy, łącznie z krawędziami.

Q: Co robi align-self?

align-self nadpisuje align-items kontenera dla jednego elementu. Na przykład align-self: flex-end na jednym dziecku przesuwa tylko je na koniec osi poprzecznej, a pozostałe zostają tam, gdzie umieściło je align-items.

Q: Czy we flexboxie jest justify-self?

Nie. Flexbox ignoruje justify-self, bo oś główna jest wspólna dla wszystkich elementów. Żeby przesunąć jeden element wzdłuż osi głównej, użyj marginesu auto, na przykład margin-inline-start: auto. justify-self działa w grid.

justify-content i align-items w jednym zdaniu

W kontenerze flex justify-content rozkłada elementy wzdłuż osi głównej (w poprzek wiersza), a align-items ustawia je na osi poprzecznej (w górę i w dół wiersza). Obie właściwości ustawia się na kontenerze:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center both ways</title>
  <style>
    .box {
      display: flex;
      justify-content: center; /* horizontal, in a row */
      align-items: center;     /* vertical, in a row */
      height: 140px;
      background: #e5e7eb;
    }
    .item { background: #2563eb; color: white; padding: 12px 18px; }
  </style>
</head>
<body>
  <div class="box"><div class="item">Centered</div></div>
</body>
</html>

Pudełko jest wyśrodkowane w obu kierunkach: tak samo daleko od krawędzi początkowej i końcowej oraz od góry i dołu. Usuń height: 140px, a align-items: center nie będzie miało nic do zrobienia, bo kontener skurczy się do wysokości elementu.

Wszystkie wartości justify-content, zmierzone

Każdy wiersz poniżej to te same trzy elementy z innym justify-content. Liczby w etykiecie nad każdym wierszem to odstępy zostawione przez przeglądarkę: przed pierwszym elementem, między elementami i po ostatnim.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>justify-content values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; width: 420px; background: #e5e7eb; margin: 2px 0 10px; }
    .row div { width: 60px; height: 28px; background: #2563eb; }
    .row div:nth-child(2) { background: #16a34a; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="list"></div>
  <script>
    const values = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
    const list = document.getElementById('list');
    values.forEach((v) => {
      const label = document.createElement('code');
      const row = document.createElement('div');
      row.className = 'row';
      row.style.justifyContent = v;
      row.innerHTML = '<div></div><div></div><div></div>';
      list.append(label, row);
      const b = row.getBoundingClientRect();
      const r = [...row.children].map((c) => c.getBoundingClientRect());
      const gaps = [r[0].left - b.left, r[1].left - r[0].right, r[2].left - r[1].right, b.right - r[2].right];
      label.textContent = 'justify-content: ' + v + '   gaps: ' + gaps.map(Math.round).join(' / ');
    });
  </script>
</body>
</html>

Kontener ma 420px, a elementy zajmują 180px, więc zostaje 240px wolnej przestrzeni. Gdzie trafia:

Wartość	Wolna przestrzeń trafia	Odstępy w demo
`flex-start` (i `start`)	cała za elementy	0 / 0 / 0 / 240
`center`	połowa przed, połowa za	120 / 0 / 0 / 120
`flex-end` (i `end`)	cała przed elementy	240 / 0 / 0 / 0
`space-between`	tylko między elementy	0 / 120 / 120 / 0
`space-around`	po równo z obu stron każdego elementu, więc krawędzie dostają połowę	40 / 80 / 80 / 40
`space-evenly`	każdy odstęp równy, łącznie z krawędziami	60 / 60 / 60 / 60

flex-start podąża za kierunkiem flex, a start za kierunkiem pisma. Różnią się tylko przy row-reverse lub column-reverse, gdzie flex-start jest na odwróconym końcu.

Wszystkie wartości align-items

align-items działa w poprzek wiersza. Elementy poniżej mają różne wysokości, żeby było widać, co robi z nimi każda wartość:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-items values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .row { display: flex; gap: 4px; width: 170px; height: 100px; background: #e5e7eb; }
    .row div { width: 50px; background: #2563eb; color: white; }
    .row div:nth-child(1) { font-size: 26px; }
    .row div:nth-child(2) { background: #16a34a; padding-top: 20px; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid" id="grid"></div>
  <script>
    ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'].forEach((v) => {
      const cell = document.createElement('div');
      cell.innerHTML = '<code>align-items: ' + v + '</code><div class="row" style="align-items: ' + v + '"><div>Ag</div><div>Ag</div><div>Ag</div></div>';
      document.getElementById('grid').append(cell);
    });
  </script>
</body>
</html>

Wartość	Co dzieje się na osi poprzecznej
`stretch` (domyślna)	Elementy bez ustawionej wysokości rosną, żeby wypełnić kontener
`flex-start` (i `start`)	Elementy są u góry, z własną wysokością
`center`	Elementy są wyśrodkowane, z własną wysokością
`flex-end` (i `end`)	Elementy są na dole
`baseline`	Elementy przesuwają się tak, żeby pierwsze linijki tekstu miały wspólną linię bazową

W pudełku baseline trzy etykiety "Ag" stoją na jednej linii, choć pierwsza jest większa, a druga ma nad sobą padding. To wartość dla wiersza, który łączy duży nagłówek z małym tekstem albo etykietę z polem formularza.

Kliknij, żeby wyrównać

Kliknij dowolną komórkę siatki 3 na 3. Pudełko przesunie się tam, a poniżej pojawi się CSS, który je tam umieszcza:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alignment picker</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .wrap { display: flex; gap: 16px; align-items: flex-start; }
    .picker { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
    .picker button { height: 28px; border: 1px solid #111827; background: white; cursor: pointer; }
    .picker button[aria-pressed="true"] { background: #2563eb; }
    #stage { display: flex; width: 260px; height: 150px; background: #e5e7eb; }
    .item { background: #16a34a; color: white; padding: 10px 14px; }
    pre { background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="picker" id="picker"></div>
    <div id="stage"><div class="item">Box</div></div>
  </div>
  <pre id="out"></pre>
  <script>
    const spots = ['flex-start', 'center', 'flex-end'];
    const stage = document.getElementById('stage');
    const pick = (row, col, btn) => {
      stage.style.alignItems = spots[row];
      stage.style.justifyContent = spots[col];
      document.querySelectorAll('.picker button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
      document.getElementById('out').textContent =
        '.stage {\n  display: flex;\n  justify-content: ' + spots[col] + ';\n  align-items: ' + spots[row] + ';\n}';
    };
    spots.forEach((_, row) => spots.forEach((_, col) => {
      const btn = document.createElement('button');
      btn.setAttribute('aria-label', 'row ' + (row + 1) + ', column ' + (col + 1));
      btn.addEventListener('click', () => pick(row, col, btn));
      document.getElementById('picker').append(btn);
    }));
    pick(1, 1, document.querySelectorAll('.picker button')[4]);
  </script>
</body>
</html>

Wiersze selektora zmieniają align-items, a kolumny justify-content. Środkowa komórka to klasyczne "wyśrodkowanie diva".

W kolumnie obie się zamieniają

justify-content zawsze podąża za osią główną. Przy flex-direction: column oś główna jest pionowa, więc justify-content przesuwa elementy w górę i w dół, a align-items w poprzek:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Column axes</title>
  <style>
    .col {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* now vertical: pushed to the bottom */
      align-items: center;       /* now horizontal: centered */
      height: 160px;
      background: #e5e7eb;
    }
    .col div { background: #2563eb; color: white; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="col"><div>One</div><div>Two</div></div>
</body>
</html>

Jeśli je pomylisz, zamień obie właściwości miejscami zamiast przepisywać układ.

align-self i marginesy auto: tylko jeden element

align-self na elemencie nadpisuje align-items dla tego elementu. We flexboxie nie ma justify-self; żeby przesunąć jeden element wzdłuż osi głównej, nadaj mu margines auto, który zabiera całą wolną przestrzeń po tej stronie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-self</title>
  <style>
    .bar { display: flex; align-items: flex-start; gap: 8px; height: 90px; background: #e5e7eb; }
    .bar div { background: #2563eb; color: white; padding: 8px 12px; }
    .bar .down { align-self: flex-end; background: #16a34a; }
    .bar .last { margin-inline-start: auto; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="bar">
    <div>Top</div>
    <div class="down">align-self: flex-end</div>
    <div class="last">margin-inline-start: auto</div>
  </div>
</body>
</html>

Zielony element sam opada na dół, a bursztynowy zostaje zepchnięty na sam koniec wiersza, podczas gdy pozostałe zostają na początku.

Gdy linii jest kilka: align-content

align-items wyrównuje elementy wewnątrz ich linii. Gdy kontener zawija się na kilka linii, align-content rozmieszcza same linie i przyjmuje te same wartości co justify-content. Nic nie robi w kontenerze nowrap, którego jedyna linia zawsze wypełnia wysokość kontenera. Strona o flex-wrap to pokazuje.

Częste błędy

Mylenie osi. justify-content to kierunek przepływu, align-items działa w poprzek niego. W kolumnie wyśrodkowanie w pionie to justify-content: center.
Brak wolnej przestrzeni. Element z flex: 1 zabiera całe miejsce, więc justify-content nie ma czego rozkładać. To samo dzieje się, gdy kontener ma inline-flex i jest dokładnie tak szeroki jak jego elementy.
Brak wysokości dla align-items. Kontener tak wysoki jak jego treść nie zostawia nic do wyrównania. Ustaw height albo min-height.
Szukanie justify-self we flexboxie. Jest tam ignorowane. Użyj na elemencie margin-inline-start: auto (albo margin-left: auto).
align-items: stretch, które nie rozciąga. Element z własnym height je zachowuje. Usuń wysokość (użyj min-height, jeśli potrzebne jest minimum).
Ustawianie tych właściwości na elementach. Obie idą na kontener flex. Tylko align-self ustawia się na elemencie.

Najczęściej zadawane pytania

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

justify-content rozkłada elementy wzdłuż osi głównej, czyli w kierunku, w którym płyną (poziomo przy flex-direction: row). align-items ustawia je wzdłuż osi poprzecznej (pionowo w wierszu). W kolumnie obie się zamieniają: justify-content działa pionowo.

Czym różnią się space-between, space-around i space-evenly?

space-between nie dodaje miejsca przed pierwszym elementem ani po ostatnim, a resztę dzieli między elementy. space-around daje każdemu elementowi tyle samo miejsca po obu stronach, więc krawędzie dostają pół odstępu. space-evenly sprawia, że każdy odstęp jest równy, łącznie z krawędziami.

Dlaczego justify-content nie działa?

Zwykle nie ma wolnej przestrzeni do rozłożenia: jakiś element ma flex-grow albo flex: 1, albo kontener jest tylko tak szeroki jak jego elementy (na przykład przy display: inline-flex lub kontenerze z float). Sprawdź też, czy display: flex jest na rodzicu, a nie na elementach.

Dlaczego align-items center nie wyśrodkowuje w pionie?

Kontener jest prawdopodobnie dokładnie tak wysoki jak jego treść, więc nie ma w czym wyśrodkowywać. Nadaj kontenerowi flex wysokość albo min-height, a elementy przesuną się na jego środek.

Co robi align-self?

align-self nadpisuje align-items kontenera dla jednego elementu. Na przykład align-self: flex-end na jednym dziecku przesuwa tylko je na koniec osi poprzecznej, a pozostałe zostają tam, gdzie umieściło je align-items.

Czy we flexboxie jest justify-self?

Nie. Flexbox ignoruje justify-self, bo oś główna jest wspólna dla wszystkich elementów. Żeby przesunąć jeden element wzdłuż osi głównej, użyj marginesu auto, na przykład margin-inline-start: auto. justify-self działa w grid.

Powiązane zagadnienia