Vlastnost justify-content

Vlastnost justify-content nastavuje zarovnání prvků podél hlavní osy pro flexboxy a podél horizontální osy pro gridy. Aplikuje se na nadřazený prvek.

Syntaxe

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

Hodnoty

Hodnota	Popis
`flex-start`	Bloky jsou přitlačeny k začátku hlavní (horizontální) osy.
`flex-end`	Bloky jsou přitlačeny ke konci hlavní (horizontální) osy.
`center`	Bloky jsou umístěny ve středu hlavní (horizontální) osy.
`space-between`	Bloky jsou rozloženy podél hlavní (horizontální) osy, přičemž první prvek je přitlačen k začátku osy, a poslední - ke konci.
`space-around`	Bloky jsou rozloženy podél hlavní (horizontální) osy, přičemž mezi prvním blokem a začátkem osy, posledním blokem a koncem osy je stejná mezera jako mezi ostatními bloky. Avšak, nejsou stejné, jak by se mohlo zdát: mezery se sčítají a mezi dvěma bloky je vzdálenost dvakrát větší než mezi blokem a začátkem/koncem osy.

Výchozí hodnota: flex-start.

Příklad . Hodnota flex-start

Nyní je osa směrována zleva doprava (to dělá flex-direction: row) a bloky jsou přitlačeny k levé 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;
}

Příklad . Hodnota flex-end

V tomto příkladu je osa také směrována zleva doprava, ale bloky jsou přitlačeny k pravé straně, protože je nastaveno 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;
}

Příklad . Hodnota center

Nyní budou bloky umístěny ve středu bez ohledu na směr hlavní osy:

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

Příklad . Hodnota space-between

Bloky jsou rozloženy podél hlavní osy, přičemž první prvek je přitlačen k začátku osy, a poslední - ke konci:

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

Příklad . Hodnota space-around

Bloky jsou rozloženy podél hlavní osy, přičemž mezi prvním blokem a začátkem osy, posledním blokem a koncem osy je stejná mezera, jako mezi ostatními bloky. Avšak, mezery se sčítají a mezi dvěma bloky je vzdálenost dvakrát větší než mezi blokem a začátkem/koncem osy:

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

Příklad . Hodnota center. Osa dolů

Změňme směr hlavní osy 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;
}

Příklad . Hodnota space-between. Osa dolů

Nyní se bloky rovnoměrně rozloží vertikálně:

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

Příklad . Zarovnání k začátku horizontální osy (řádků) v gridu

Nastavme zarovnání pro naše prvky k začátku horizontální osy:

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

Příklad . Zarovnání do středu horizontální osy v gridu

A nyní nastavme zarovnání pro naše prvky do středu horizontální osy:

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

Příklad . Zarovnání ke konci horizontální osy v gridu

Nastavme zarovnání pro naše prvky ke konci horizontální osy:

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

Viz také

vlastnost flex-direction,
která nastavuje směr os flexboxů
vlastnost align-items,
která nastavuje zarovnání podél příčné osy
vlastnost flex-wrap,
která nastavuje víceřádkovost flexboxů
vlastnost flex-flow,
zkratka pro flex-direction a flex-wrap
vlastnost order,
která nastavuje pořadí flexboxů
vlastnost align-self,
která nastavuje zarovnání jednoho bloku
vlastnost flex-basis,
která nastavuje velikost konkrétního flexboxu
vlastnost flex-grow,
která nastavuje "hladovost" flexboxů
vlastnost flex-shrink,
která nastavuje smrštitelnost flexboxů
vlastnost flex,
zkratka pro flex-grow, flex-shrink a flex-basis