Właściwość justify-content służy do wyrównywania elementów kontenera elastycznego (flexbox), właściwość jest wykorzystywana w sytuacji gdy elementy nie wykorzystują całej dostępnej przestrzeni.
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:
See the Pen
Untitled by Aura (@Julka85)
on CodePen.0
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