Właściwość justify-content [CSS] – Flexbox

Z pomocą właściwości CSS justify-content możemy wyrównać elementy umieszczone w kontenerze (flexbox). Właściwość ta jest wykorzystywana głównie w sytuacji gdy elementy nie wykorzystują całej dostępnej przestrzeni.

W praktyce dzięki niej możemy rozmieszczać np. kolumny na stronie w taki sposób by zachowywały równe między sobą odległości. Mogą one więc być położone na środku strony, jedna obok drugiej, każda w innym narożniku nadrzędnego kontenera strony.

Przyjmowane wartości przez justify-content

• flex-start – domyślne ustawienie, elementy przesunięte są na lewo
• flex-end – elementy przesunięte na prawo
• center – elementy są wyśrodkowane względem kontenera
• space-between – między elementami wstawione są równe przerwy
• space-around – elementy są pozycjonowane z spacją przed, między i po
• initial – ustawia wartość domyślna
• inherit – dziedziczy warowność z nadrzędnego elementu

Przykłady:

Obsługa przez przeglądarki:

źródło:
https://www.w3schools.com/cssref/css3_pr_justify-content.asp