Lastnost align-content

Lastnost align-content določa poravnavo elementov vzdolž prečne osi za flex bloke in po navpični osi za mreže. Uporablja se za nadrejeni element.

Sintaksa

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

Vrednosti

Vrednost	Opis
`flex-start`	Bloki so pritisnjeni na začetek prečne (navpične) osi.
`flex-end`	Bloki so pritisnjeni na konec prečne (navpične) osi.
`center`	Bloki so postavljeni na sredini prečne (navpične) osi.
`space-between`	Bloki so porazdeljeni vzdolž prečne (navpične) osi, pri čemer je prvi element pritisnjen na začetek osi, zadnji pa na konec.
`space-around`	Bloki so porazdeljeni vzdolž prečne (navpične) osi, pri čemer je med prvim blokom in začetkom osi, zadnjim blokom in koncem osi enak razmik, kot med preostalimi bloki. Vendar niso enaki, kot se morda zdi: razmiki se seštevajo in med dvema blokoma je razdalja dvakrat večja kot med blokom in začetkom/koncem osi.

Primer . Vrednost flex-start

V tem primeru je os, po kateri poteka poravnava, usmerjena od zgoraj navzdol, tj. je prečna. Kot je razvidno iz dobljenega rezultata, so vsi naši elementi pritisnjeni na njen zgornji del:

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

Primer . Vrednost flex-end

V tem primeru so bloki pritisnjeni na spodnjo stran prečne osi, ker je lastnost align-content nastavljena na vrednost 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;
}

Primer . Vrednost center

Trenutno so bloki poravnani na sredini prečne 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;
}

Poravnava na začetku navpične osi v mreži

Nastavimo poravnavo za naše elemente v mreži na začetek navpične 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;
}

Poravnava na sredini navpične osi v mreži

Zdaj pa nastavimo poravnavo elementov na sredino navpične 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;
}

Poravnava na koncu navpične osi v mreži

Nastavimo poravnavo elementov na konec navpične 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;
}

Glejte tudi

lastnost flex-direction,
ki določa smer osi flex blokov
lastnost justify-content,
ki določa poravnavo po glavni osi
lastnost align-items,
ki določa poravnavo po prečni osi
lastnost flex-wrap,
ki določa večvrstičnost flex blokov
lastnost flex-flow,
okrajšava za flex-direction in flex-wrap
lastnost order,
ki določa vrstni red flex blokov
lastnost align-self,
ki določa poravnavo enega bloka
lastnost place-content,
ki določa poravnavo po glavni in prečni osi