Īpašība align-content

Īpašība align-content nosaka elementu izlīdzināšanu pa šķērsasi flex blokiem un pa vertikālo asi grid elementiem. Attiecas uz vecākelementu.

Sintakse

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

Vērtības

Vērtība	Apraksts
`flex-start`	Bloki ir piespiesti pie šķērsas (vertikālās) ass sākuma.
`flex-end`	Bloki ir piespiesti pie šķērsas (vertikālās) ass beigām.
`center`	Bloki atrodas šķērsas (vertikālās) ass centrā.
`space-between`	Bloki ir izvietoti pa šķērsasi (vertikālo asi), savukārt pirmais elements ir piespiests pie ass sākuma, un pēdējais - pie ass beigām.
`space-around`	Bloki ir izvietoti pa šķērsasi (vertikālo asi), savukārt starp pirmo bloku un ass sākumu, pēdējo bloku un ass beigām ir tāds pats attālums, kā starp pārējiem blokiem. Tomēr tie nav vienādi, kā varētu šķist: attālumi tiek summēti un starp diviem blokiem attālums ir divreiz lielāks nekā starp bloku un ass sākumu/beigām.

Piemērs . Vērtība flex-start

Šajā piemērā ass, pa kuru notiek izlīdzināšana, ir vērsta no augšas uz leju, t.i., tā ir šķērsass. Kā redzams no iegūtā rezultāta, visi mūsu elementi ir piespiesti pie tās augšējās daļas:

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

Piemērs . Vērtība flex-end

Šajā piemērā bloki ir piespiesti pie šķērsas ass apakšējās malas, jo īpašībai align-content ir iestatīta vērtība 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;
}

Piemērs . Vērtība center

Šobrīd bloki ir izlīdzināti šķērsas ass centrā:

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

Izlīdzināšana pa vertikālās ass sākumu gridā

Iestatīsim izlīdzināšanu mūsu elementiem gridā pa vertikālās ass sākumu:

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

Izlīdzināšana pa vertikālās ass centru gridā

Tagad iestatīsim izlīdzināšanu elementu pa vertikālās ass centru:

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

Izlīdzināšana pa vertikālās ass beigām gridā

Iestatīsim izlīdzināšanu elementu pa vertikālās ass beigām:

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

Skatiet arī

īpašība flex-direction,
kas nosaka flex bloku asu virzienu
īpašība justify-content,
kas nosaka izlīdzināšanu pa galveno asi
īpašība align-items,
kas nosaka izlīdzināšanu pa šķērsasi
īpašība flex-wrap,
kas nosaka flex bloku daudzrindu izkārtojumu
īpašība flex-flow,
saīsinājums priekš flex-direction un flex-wrap
īpašība order,
kas nosaka flex bloku secību
īpašība align-self,
kas nosaka viena bloka izlīdzināšanu
īpašība place-content,
kas nosaka izlīdzināšanu pa galveno un šķērsasi