Vlastnost align-content

Vlastnost align-content nastavuje zarovnání prvků podél příčné osy pro flexboxy a podél svislé osy pro grid. Aplikuje se na nadřazený prvek.

Syntaxe

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

Hodnoty

Hodnota	Popis
`flex-start`	Bloky jsou přitlačeny k začátku příčné (svislé) osy.
`flex-end`	Bloky jsou přitlačeny ke konci příčné (svislé) osy.
`center`	Bloky jsou umístěny ve středu příčné (svislé) osy.
`space-between`	Bloky jsou rozloženy podél příčné (svislé) 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 příčné (svislé) 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.

Příklad . Hodnota flex-start

V tomto příkladu je osa, podél které probíhá zarovnání, směrována shora dolů, tj. je příčná. Jak je vidět z výsledku, všechny naše prvky jsou přitlačeny k její horní části:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Příklad . Hodnota flex-end

V tomto příkladu jsou bloky přitlačeny k dolní straně příčné osy, protože vlastnost align-content je nastavena na hodnotu flex-end:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Příklad . Hodnota center

Nyní jsou bloky zarovnány do středu příčné osy:

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

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Zarovnání k začátku svislé osy v gridu

Nastavme zarovnání pro naše prvky v gridu k začátku svislé osy:

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

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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;
}

Zarovnání do středu svislé osy v gridu

A nyní nastavme zarovnání prvků do středu svislé osy:

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

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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;
}

Zarovnání ke konci svislé osy v gridu

Nastavme zarovnání prvků ke konci svislé osy:

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

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	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 justify-content,
která nastavuje zarovnání podél hlavní osy
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 place-content,
která nastavuje zarovnání podél hlavní a příčné osy