Omadus align-content

Omadus align-content määrab elementide joondamise põiktelje suhtes flex konteinerite puhul ja vertikaaltelje suhtes grid konteinerite puhul. Kehtib vanemelemendile.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`flex-start`	Blokid on surutud põik- (vertikaal)telje algusesse.
`flex-end`	Blokid on surutud põik- (vertikaal)telje lõppu.
`center`	Blokid asuvad põik- (vertikaal)telje keskel.
`space-between`	Blokid on jaotatud piki põik- (vertikaal)telge, kusjuures esimene element on surutud telje algusesse, viimane aga lõppu.
`space-around`	Blokid on jaotatud piki põik- (vertikaal)telge, kusjuures esimese bloki ja telje alguse, viimase bloki ja telje lõpu vahel on sama vahe, mis ülejäänud plokkide vahel. Siiski need ei võrdu, nagu võiks tunduda: vahed liidetakse ja kahe bloki vahel on kahekordne vahemaa võrreldes bloki ja telje alguse/lõpu vahega.

Näide . Väärtus flex-start

Selles näites on telg, mille suhtes joondamine toimub, suunatud ülevalt alla, st see on põiktelg. Nagu saadud tulemusest näha, on kõik meie elemendid surutud selle ülemisse ossa:

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

Näide . Väärtus flex-end

Selles näites on blokid surutud põiktelje alumise serva poole, kuna omadus align-content on määratud väärtusega 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;
}

Näide . Väärtus center

Nüüd on blokid joondatud põiktelje keskele:

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

Joondamine vertikaaltelje alguse suhtes gridis

Määrame oma elementide joonduse gridis vertikaaltelje alguse suhtes:

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

Joondamine vertikaaltelje keskme suhtes gridis

Nüüd määrame elementide joonduse vertikaaltelje keskme suhtes:

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

Joondamine vertikaaltelje lõpu suhtes gridis

Määrame elementide joonduse vertikaaltelje lõpu suhtes:

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

Vaata ka

omadus flex-direction,
mis määrab flex konteineri telgede suuna
omadus justify-content,
mis määrab joonduse põhitelje suhtes
omadus align-items,
mis määrab joonduse põiktelje suhtes
omadus flex-wrap,
mis määrab flex konteineri mitmerealise paigutuse
omadus flex-flow,
lühend flex-direction ja flex-wrap jaoks
omadus order,
mis määrab flex elementide järjestuse
omadus align-self,
mis määrab üksiku elemendi joonduse
omadus place-content,
mis määrab joonduse põhi- ja põiktelje suhtes