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:
| Właściwość | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| justify-content | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
źródło:
https://www.w3schools.com/cssref/css3_pr_justify-content.asp