Az align-content tulajdonság

A align-content tulajdonság az elemek igazítását határozza meg a keresztirányú tengely mentén flex tárolók esetén és a függőleges tengely mentén grid tárolók esetén. A szülő elemre vonatkozik.

Szintaxis

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

Értékek

Érték	Leírás
`flex-start`	A blokkok a keresztirányú (függőleges) tengely elejéhez igazódnak.
`flex-end`	A blokkok a keresztirányú (függőleges) tengely végéhez igazódnak.
`center`	A blokkok a keresztirányú (függőleges) tengely középpontjához igazódnak.
`space-between`	A blokkok egyenletesen oszlanak el a keresztirányú (függőleges) tengely mentén, úgy, hogy az első elem a tengely elejéhez, az utolsó pedig a végéhez igazódik.
`space-around`	A blokkok egyenletesen oszlanak el a keresztirányú (függőleges) tengely mentén, úgy, hogy az első blokk és a tengely eleje között, valamint az utolsó blokk és a tengely vége között ugyanakkora a térköz, mint a többi blokk között. Azonban ezek nem egyenlőek, ahogy az első pillanatban tűnhet: a térközök összeadódnak, így két blokk között két times nagyobb a távolság, mint egy blokk és a tengely eleje/vége között.

Példa . flex-start érték

Ebben a példában a tengely, mentén amely az igazítás történik, fentről lefelé irányul, azaz keresztirányú. Ahogy az eredményből is látszik, minden elemünk annak felső részéhez igazódik:

<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élda . flex-end érték

Ebben a példában a blokkok a keresztirányú tengely alsó oldalához igazódnak, mivel a align-content tulajdonság flex-end értékre van állítva:

<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élda . center érték

Most a blokkok a keresztirányú tengely középpontjához igazódnak:

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

Igazítás a függőleges tengely elejéhez gridben

Állítsuk be az elemek igazítását a gridben a függőleges tengely elejéhez:

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

Igazítás a függőleges tengely középpontjához gridben

Most pedig állítsuk be az elemek igazítását a függőleges tengely középpontjához:

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

Igazítás a függőleges tengely végéhez gridben

Állítsuk be az elemek igazítását a függőleges tengely végéhez:

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

Lásd még

a flex-direction tulajdonság,
amely a flex tárolók tengelyeinek irányát határozza meg
a justify-content tulajdonság,
amely a főtengely menti igazítást határozza meg
a align-items tulajdonság,
amely a keresztirányú tengely menti igazítást határozza meg
a flex-wrap tulajdonság,
amely a flex tárolók többsoros voltát határozza meg
a flex-flow tulajdonság,
rövidítés a flex-direction és flex-wrap tulajdonságokra
a order tulajdonság,
amely a flex blokkok sorrendjét határozza meg
a align-self tulajdonság,
amely egyetlen blokk igazítását határozza meg
a place-content tulajdonság,
amely a fő- és keresztirányú tengelyek menti igazítást határozza meg