Svojstvo justify-content

Svojstvo justify-content postavlja poravnanje elemenata duž glavne ose za flex blokove i po horizontalnoj osi za gridove. Primenjuje se na roditeljski element.

Sintaksa

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

Vrednosti

Vrednost	Opis
`flex-start`	Blokovi su pritisnuti na početak glavne (horizontalne) ose.
`flex-end`	Blokovi su pritisnuti na kraj glavne (horizontalne) ose.
`center`	Blokovi stoje u centru glavne (horizontalne) ose.
`space-between`	Blokovi su raspoređeni duž glavne (horizontalne) ose, pri čemu je prvi element pritisnut na početak ose, a poslednji - na kraj.
`space-around`	Blokovi su raspoređeni duž glavne (horizontalne) ose, pri čemu između prvog bloka i početka ose, poslednjeg bloka i kraja ose postoji isti razmak, kao i između ostalih blokova. Međutim, oni nisu jednaki, kao što bi se moglo činiti: razmaci se sabiraju i između dva bloka rastojanje je dva puta veće nego između bloka i početka/kraja ose.

Podrazumevana vrednost: flex-start.

Primer . Vrednost flex-start

Sada je osa usmerena sleva na desno (to čini flex-direction: row), a blokovi su pritisnuti na levu stranu:

<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

U ovom primeru osa je takođe usmerena sleva na desno, ali su blokovi pritisnuti na desnu stranu, jer je postavljeno justify-content 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

Sada će blokovi biti u centru nezavisno od smera glavne ose:

<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

Blokovi su raspoređeni duž glavne ose, pri čemu je prvi element pritisnut na početak ose, a poslednji - na kraj:

<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

Blokovi su raspoređeni duž glavne ose, pri čemu između prvog bloka i početka ose, poslednjeg bloka i kraja ose postoji isti razmak, kao i između ostalih blokova. Međutim, razmaci se sabiraju i između dva bloka rastojanje je dva puta veće nego između bloka i početka/kraja ose:

<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. Osa nadole

Promenimo smer glavne ose, postavivši 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. Osa nadole

Sada će se blokovi ravnomerno rasporediti po vertikali:

<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 . Poravnanje po početku horizontalne ose (redova) u gridu

Postavimo poravnanje za naše elemente po početku horizontalne ose:

<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 . Poravnanje po centru horizontalne ose u gridu

A sada postavimo poravnanje za naše elemente po centru horizontalne ose:

<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 . Poravnanje po kraju horizontalne ose u gridu

Postavimo poravnanje za naše elemente po kraju horizontalne ose:

<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;
}

Pogledajte takođe

svojstvo flex-direction,
koje postavlja smer osa flex blokova
svojstvo align-items,
koje postavlja poravnanje po poprečnoj osi
svojstvo flex-wrap,
koje postavlja višelinijskost flex blokova
svojstvo flex-flow,
skraćenica za flex-direction i flex-wrap
svojstvo order,
koje postavlja redosled flex blokova
svojstvo align-self,
koje postavlja poravnanje jednog bloka
svojstvo flex-basis,
koje postavlja veličinu određenog flex bloka
svojstvo flex-grow,
koje postavlja pohlepu flex blokova
svojstvo flex-shrink,
koje postavlja sabijanje flex blokova
svojstvo flex,
skraćenica za flex-grow, flex-shrink i flex-basis