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

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:

• 1
• 2
• 3
• 4
• 5

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