Vlastnosť justify-content

Vlastnosť justify-content nastavuje zarovnanie prvkov pozdĺž hlavnej osi pre flex kontajnery a po horizontálnej osi pre gridy. Aplikuje sa na nadradený (rodičovský) element.

Syntax

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

Hodnoty

Hodnota	Popis
`flex-start`	Bloky sú pritlačené k začiatku hlavnej (horizontálnej) osi.
`flex-end`	Bloky sú pritlačené ku koncu hlavnej (horizontálnej) osi.
`center`	Bloky sú umiestnené v strede hlavnej (horizontálnej) osi.
`space-between`	Bloky sú rozložené pozdĺž hlavnej (horizontálnej) osi, pričom prvý prvok je pritlačený k začiatku osi, a posledný - ku koncu.
`space-around`	Bloky sú rozložené pozdĺž hlavnej (horizontálnej) osi, pričom medzi prvým blokom a začiatkom osi, posledným blokom a koncom osi je rovnaká medzera, ako medzi ostatnými blokmi. Avšak, nie sú rovnaké, ako by sa mohlo zdať: medzery sa sčítavajú a medzi dvoma blokmi je vzdialenosť dvakrát väčšia ako medzi blokom a začiatkom/koncom osi.

Predvolená hodnota: flex-start.

Príklad . Hodnota flex-start

Teraz je os smerovaná zľava doprava (to robí flex-direction: row) a bloky sú pritlačené k ľavej strane:

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

Príklad . Hodnota flex-end

V tomto príklade je os tiež smerovaná zľava doprava, ale bloky sú pritlačené k pravej strane, pretože je nastavené justify-content na hodnotu 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;
}

Príklad . Hodnota center

Teraz budú bloky umiestnené v strede bez ohľadu na smer hlavnej 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;
}

Príklad . Hodnota space-between

Bloky sú rozložené pozdĺž hlavnej osi, pričom prvý prvok je pritlačený k začiatku osi, a posledný - ku koncu:

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

Príklad . Hodnota space-around

Bloky sú rozložené pozdĺž hlavnej osi, pričom medzi prvým blokom a začiatkom osi, posledným blokom a koncom osi je rovnaká medzera, ako medzi ostatnými blokmi. Avšak, medzery sa sčítavajú a medzi dvoma blokmi je vzdialenosť dvakrát väčšia ako medzi blokom a začiatkom/koncom 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;
}

Príklad . Hodnota center. Osi smerom nadol

Zmeňme smer hlavnej osi nastavením flex-direction na hodnotu 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;
}

Príklad . Hodnota space-between. Osi smerom nadol

Teraz sa bloky rozložia rovnomerne po vertikále:

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

Príklad . Zarovnanie na začiatok horizontálnej osi (riadkov) v gride

Nastavme zarovnanie pre naše prvky na začiatok horizontálnej 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;
}

Príklad . Zarovnanie na stred horizontálnej osi v gride

A teraz nastavme zarovnanie pre naše prvky na stred horizontálnej 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;
}

Príklad . Zarovnanie na koniec horizontálnej osi v gride

Nastavme zarovnanie pre naše prvky na koniec horizontálnej 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;
}

Pozri tiež

vlastnosť flex-direction,
ktorá nastavuje smer osí flex kontajnerov
vlastnosť align-items,
ktorá nastavuje zarovnanie pozdĺž priečnej osi
vlastnosť flex-wrap,
ktorá nastavuje viacriadkovosť flex kontajnerov
vlastnosť flex-flow,
skratka pre flex-direction a flex-wrap
vlastnosť order,
ktorá nastavuje poradie flex prvkov
vlastnosť align-self,
ktorá nastavuje zarovnanie jedného prvku
vlastnosť flex-basis,
ktorá nastavuje veľkosť konkrétneho flex prvku
vlastnosť flex-grow,
ktorá nastavuje "lakomosť" flex prvkov
vlastnosť flex-shrink,
ktorá nastavuje stlačiteľnosť flex prvkov
vlastnosť flex,
skratka pre flex-grow, flex-shrink a flex-basis