Vlastnosť align-content

Vlastnosť align-content nastavuje zarovnanie prvkov pozdĺž priečnej osi pre flex boxy a po vertikálnej osi pre gridy. Aplikuje sa na nadradený prvok.

Syntax

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

Hodnoty

Hodnota	Popis
`flex-start`	Bloky sú pritlačené k začiatku priečnej (vertikálnej) osi.
`flex-end`	Bloky sú pritlačené ku koncu priečnej (vertikálnej) osi.
`center`	Bloky sú umiestnené v strede priečnej (vertikálnej) osi.
`space-between`	Bloky sú rozložené pozdĺž priečnej (vertikálnej) osi, pričom prvý prvok je pritlačený k začiatku osi, a posledný - ku koncu.
`space-around`	Bloky sú rozložené pozdĺž priečnej (vertiká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.

Príklad . Hodnota flex-start

V tomto príklade os, po ktorej prebieha zarovnanie smeruje zhora nadol, t.j. je priečnou. Ako vidno zo získaného výsledku, všetky naše prvky sú pritlačené k jej hornej časti:

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

Príklad . Hodnota flex-end

V tomto príklade sú bloky pritlačené k dolnej strane priečnej osi, pretože vlastnosť align-content je nastavená 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;
}

Príklad . Hodnota center

Teraz sú bloky zarovnané do stredu priečnej osi:

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

Zarovnanie na začiatok vertikálnej osi v gride

Nastavme zarovnanie pre naše prvky v gride na začiatok vertikálnej osi:

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

Zarovnanie do stredu vertikálnej osi v gride

A teraz nastavme zarovnanie prvkov do stredu vertikálnej osi:

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

Zarovnanie na koniec vertikálnej osi v gride

Nastavme zarovnanie prvkov na koniec vertikálnej osi:

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

Pozrite tiež

vlastnosť flex-direction,
ktorá nastavuje smer osí flex boxov
vlastnosť justify-content,
ktorá nastavuje zarovnanie po hlavnej osi
vlastnosť align-items,
ktorá nastavuje zarovnanie po priečnej osi
vlastnosť flex-wrap,
ktorá nastavuje viacriadkovosť flex boxov
vlastnosť flex-flow,
skratka pre flex-direction a flex-wrap
vlastnosť order,
ktorá nastavuje poradie flex boxov
vlastnosť align-self,
ktorá nastavuje zarovnanie jedného bloku
vlastnosť place-content,
ktorá nastavuje zarovnanie po hlavnej a priečnej osi