Lastnost justify-content

Lastnost justify-content določa poravnavo elementov vzdolž glavne osi za flex bloke in po vodoravni osi za mreže. Uporablja se za nadrejeni element.

Sintaksa

selektor {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Vrednosti

Vrednost	Opis
`flex-start`	Bloki so pritisnjeni na začetek glavne (vodoravne) osi.
`flex-end`	Bloki so pritisnjeni na konec glavne (vodoravne) osi.
`center`	Bloki so postavljeni na sredino glavne (vodoravne) osi.
`space-between`	Bloki so porazdeljeni vzdolž glavne (vodoravne) osi, pri čemer je prvi element pritisnjen na začetek osi, zadnji pa na konec.
`space-around`	Bloki so porazdeljeni vzdolž glavne (vodoravne) osi, pri čemer je med prvim blokom in začetkom osi, zadnjim blokom in koncem osi enak presledek, kot med preostalimi bloki. Vendar niso enaki, kot se morda zdi: presledki se seštevajo in med dvema blokoma je razdalja dvakrat večja kot med blokom in začetkom/koncem osi.

Privzeta vrednost: flex-start.

Primer . Vrednost flex-start

Trenutno je os usmerjena od leve proti desni (to naredi flex-direction: row), bloki pa so pritisnjeni na levo stran:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Primer . Vrednost flex-end

V tem primeru je os prav tako usmerjena od leve proti desni, vendar so bloki pritisnjeni na desno stran, ker je justify-content nastavljen na vrednost flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Primer . Vrednost center

Trenutno bodo bloki postavljeni na sredino neodvisno od smeri glavne osi:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Primer . Vrednost space-between

Bloki so porazdeljeni vzdolž glavne osi, pri čemer je prvi element pritisnjen na začetek osi, zadnji pa na konec:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Primer . Vrednost space-around

Bloki so porazdeljeni vzdolž glavne osi, pri čemer je med prvim blokom in začetkom osi, zadnjim blokom in koncem osi enak presledek, kot med preostalimi bloki. Vendar se presledki seštevajo in med dvema blokoma je razdalja dvakrat večja kot med blokom in začetkom/koncem osi:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Primer . Vrednost center. Os navzdol

Spremenimo smer glavne osi z nastavitvijo flex-direction na vrednost column:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Primer . Vrednost space-between. Os navzdol

Trenutno se bodo bloki enakomerno porazdelili po navpičnici:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Primer . Poravnava na začetek vodoravne osi (vrstice) v mreži

Nastavimo poravnavo za naše elemente na začetek vodoravne osi:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Primer . Poravnava na sredino vodoravne osi v mreži

Zdaj pa nastavimo poravnavo za naše elemente na sredino vodoravne osi:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Primer . Poravnava na konec vodoravne osi v mreži

Nastavimo poravnavo za naše elemente na konec vodoravne osi:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Glejte tudi

lastnost flex-direction,
ki določa smer osi flex blokov
lastnost align-items,
ki določa poravnavo vzdolž prečne osi
lastnost flex-wrap,
ki določa večvrstičnost flex blokov
lastnost flex-flow,
okrajšava za flex-direction in flex-wrap
lastnost order,
ki določa vrstni red flex blokov
lastnost align-self,
ki določa poravnavo enega bloka
lastnost flex-basis,
ki določa velikost posameznega flex bloka
lastnost flex-grow,
ki določa "požrešnost" flex blokov
lastnost flex-shrink,
ki določa stisljivost flex blokov
lastnost flex,
okrajšava za flex-grow, flex-shrink in flex-basis