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:
Podstawowe ustawienia CSS dla przykładów:
div.contener{ display: flex; -webkit-justify-content: flex-start; width: 100%; height: 98px; background-color: #e7f2f5; } .element{ width: 70px; border: 1px solid #ccc; height: 70px; background-color: coral; }
flex-start
.flex-start.contener{justify-content:flex-start; }
flex-end
.flex-end.contener{justify-content:flex-end; }
center
.center.contener{justify-content:center;}
space-between
.space-between.contener{justify-content:space-between; }
space-around
.space-around.contener{justify-content:space-around; }
initial
.initial.contener{justify-content:initial; }
inherit
.inherit.contener{justify-content:inherit; }
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