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

Składnia CSS justify-content

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

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.

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; }