Właściwość CSSFlexbox

justify-content

Rozmieszcza elementy wzdłuż osi głównej kontenera flex lub grid.

Wartość domyślna: normal
Dziedziczona: Nie
Animowalna: nie
Dotyczy: kontenery flex, kontenery grid i kontenery wielokolumnowe
JavaScript: element.style.justifyContent = "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

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Podgląd

Definicja i zastosowanie

Właściwość justify-content decyduje, co zrobić z wolnym miejscem na osi głównej kontenera. W Flexboxie przy flex-direction: row oś główna biegnie poziomo, więc elementy przesuwają się w lewo, w prawo, na środek albo rozkładają się z równymi odstępami.

Działa tylko wtedy, gdy zostaje wolne miejsce. Jeśli elementy wypełniają cały kontener (na przykład mają flex-grow: 1), zmiana wartości nic nie da.

W siatce CSS Grid ta sama właściwość rozmieszcza całe kolumny wewnątrz kontenera, gdy siatka jest węższa niż kontener.

Składnia

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

Wartości

flex-start
Elementy ustawiają się przy początku osi głównej. Przy zwykłym kierunku wiersza to lewa krawędź.
flex-end
Elementy przesuwają się na koniec osi głównej.
center
Elementy grupują się na środku, a wolne miejsce dzieli się po równo na obie strony.
space-between
Pierwszy element przy początku, ostatni przy końcu, a pozostałe miejsce rozkłada się równo między elementami.
space-around
Każdy element dostaje taki sam odstęp po obu stronach, więc odstępy przy krawędziach są o połowę mniejsze niż między elementami.
space-evenly
Wszystkie odstępy są identyczne: między elementami i przy krawędziach kontenera.

Wartość	Opis
flex-start	Elementy ustawiają się przy początku osi głównej. Przy zwykłym kierunku wiersza to lewa krawędź.
flex-end	Elementy przesuwają się na koniec osi głównej.
center	Elementy grupują się na środku, a wolne miejsce dzieli się po równo na obie strony.
space-between	Pierwszy element przy początku, ostatni przy końcu, a pozostałe miejsce rozkłada się równo między elementami.
space-around	Każdy element dostaje taki sam odstęp po obu stronach, więc odstępy przy krawędziach są o połowę mniejsze niż między elementami.
space-evenly	Wszystkie odstępy są identyczne: między elementami i przy krawędziach kontenera.

Wartości w praktyce

flex-start

Elementy ustawiają się przy początku osi głównej. Przy zwykłym kierunku wiersza to lewa krawędź.

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

flex-end

Elementy przesuwają się na koniec osi głównej.

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

center

Elementy grupują się na środku, a wolne miejsce dzieli się po równo na obie strony.

.demo { justify-content: center; }

space-between

Pierwszy element przy początku, ostatni przy końcu, a pozostałe miejsce rozkłada się równo między elementami.

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

space-around

Każdy element dostaje taki sam odstęp po obu stronach, więc odstępy przy krawędziach są o połowę mniejsze niż między elementami.

.demo { justify-content: space-around; }

space-evenly

Wszystkie odstępy są identyczne: między elementami i przy krawędziach kontenera.

.demo { justify-content: space-evenly; }

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

Do wyśrodkowania jednego elementu w poziomie i pionie wystarczy display: flex; justify-content: center; align-items: center;.
Zamiast marginesów między elementami użyj gap. justify-content zajmie się tylko resztą wolnego miejsca.

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