Właściwość CSS justify-content

Definicja stylu, przeznaczenie i użycie justify-content

Styl justify-content wyrównuje elementy kontenera elastycznego wówczas, gdy elementy nie zajmują całego dostępnego miejsca na osi głównej (w poziomie).

Tip: Użyj właściwości align-items, aby wyrównać elementy w pionie.

Wartości właściwości justify-content

Wartość	Opis
flex-start	Wyrównuje elementy flex na początku kontenera. Wartość domyślna.
flex-end	Wyrównuje elementy elastyczne na końcu kontenera.
center	Elementy są umieszczane na środku kontenera.
space-between	Elementy będą miały przestrzeń pomiędzy sobą.
space-around	Elementy będą miały przestrzeń przed sobą, pomiędzy sobą i po sobie.
space-evenly	Elementy będą miały równą przestrzeń wokół siebie.
initial	Ustawia tę właściwość na jej wartość domyślną.
inherit	Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS justify-content

Wsparcie przeglądarek dla właściwości justify-content

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -webkit- i -moz- określa pierwszą wersję, która działała z prefiksem.

Właściwość
justify-content	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

Przykładowe zastosowania z właściwością justify-content

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Właściwość CSS:

Rezultat:

Kod CSS:

div#main {
  display: flex;
  justify-content: flex-start; 
}

Przykłady właściwości justify-content

Przykład 1: wyrównuje elementy elastyczne na środku kontenera: div { display: flex; justify-content: center; } Przykład 2: wyrównuje elementy flex na początku kontenera (ustawienie domyślne): div { display: flex; justify-content: flex-start; } Przykład 3 wyrównuje elementy elastyczne na końcu kontenera: div { display: flex; justify-content: flex-end; } Przykla 4: wyświetla elementy flex z odstępami między wierszami: div { display: flex; justify-content: space-between; } Przyklad 5: wyświetla elementy flex z odstępami przed, między i po wierszach: div { display: flex; justify-content: space-around; }