Właściwość CSSFlexbox

align-content

Rozmieszcza całe linie elementów na osi poprzecznej kontenera.

Wartość domyślna: normal
Dziedziczona: Nie
Animowalna: nie
Dotyczy: kontenery flex z wieloma liniami, kontenery grid, wielokolumnowe i blokowe
JavaScript: element.style.alignContent = "center"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.badges {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  height: 120px;
}

HTML przykładu

<div class="badges stage">
  <span class="box">Seria 7 dni</span><span class="box">100 zadań</span><span class="box">Mistrz CSS</span><span class="box">Pierwsza strona</span>
</div>

Podgląd

Definicja i zastosowanie

Właściwość align-content działa na poziomie linii, a nie pojedynczych elementów. W kontenerze flex ma znaczenie dopiero wtedy, gdy elementy zawijają się do kilku linii (flex-wrap: wrap) i zostaje wolne miejsce na osi poprzecznej.

Wartości przypominają justify-content: linie mogą zbić się przy początku, na środku, przy końcu albo rozłożyć z równymi odstępami. Domyślnie linie się rozciągają, żeby wypełnić kontener.

W siatce Grid ta sama właściwość rozmieszcza całe wiersze, a w nowszych przeglądarkach działa też w zwykłych blokach, co pozwala wyśrodkować treść w pionie bez Flexboxa.

Składnia

align-content: normal | flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;

Wartości

flex-start
Linie zbijają się przy górnej krawędzi.
center
Linie grupują się na środku.
flex-end
Linie przylegają do dołu.
space-between
Pierwsza linia u góry, ostatnia na dole, reszta miejsca między nimi.
stretch
Linie rozciągają się, żeby wypełnić wysokość.

Wartość	Opis
flex-start	Linie zbijają się przy górnej krawędzi.
center	Linie grupują się na środku.
flex-end	Linie przylegają do dołu.
space-between	Pierwsza linia u góry, ostatnia na dole, reszta miejsca między nimi.
stretch	Linie rozciągają się, żeby wypełnić wysokość.

Wartości w praktyce

flex-start

Linie zbijają się przy górnej krawędzi.

.demo { align-content: flex-start; }

center

Linie grupują się na środku.

.demo { align-content: center; }

flex-end

Linie przylegają do dołu.

.demo { align-content: flex-end; }

space-between

Pierwsza linia u góry, ostatnia na dole, reszta miejsca między nimi.

.demo { align-content: space-between; }

stretch

Linie rozciągają się, żeby wypełnić wysokość.

.demo { align-content: stretch; }

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Jeśli align-content nic nie zmienia, sprawdź, czy kontener ma flex-wrap: wrap i wysokość większą niż treść.
Do wyrównania elementów w jednej linii służy align-items, nie align-content.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs