Savybė align-content

Savybė align-content nustato elementų lygiavimą išilgai skersinės ašies flex blokams ir vertikalia ašimi gardų (grid) atveju. Taikoma tėviniam elementui.

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`flex-start`	Blokai prispausiami prie skersinės (vertikalios) ašies pradžios.
`flex-end`	Blokai prispausiami prie skersinės (vertikalios) ašies pabaigos.
`center`	Blokai išdėstomi skersinės (vertikalios) ašies centre.
`space-between`	Blokai paskirstomi išilgai skersinės (vertikalios) ašies, o pirmasis elementas prispausiamas prie ašies pradžios, o paskutinis - prie ašies pabaigos.
`space-around`	Blokai paskirstomi išilgai skersinės (vertikalios) ašies, o tarp pirmojo bloko ir ašies pradžios, paskutinio bloko ir ašies pabaigos yra toks pats tarpas, kaip ir tarp likusių blokų. Tačiau jie nėra lygūs, kaip gali atrodyti: tarpai sumuojasi ir tarp dviejų blokų atstumas yra dvigubai didesnis nei tarp bloko ir ašies pradžios/pabaigos.

Pavyzdys . Reikšmė flex-start

Šiame pavyzdyje ašis, pagal kurią vyksta lygiavimas, nukreipta iš viršaus į apačią, t.y. ji yra skersinė. Kaip matyti iš gauto rezultato, visi mūsų elementai prispausiami prie jos viršutinės dalies:

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

Pavyzdys . Reikšmė flex-end

Šiame pavyzdyje blokai prispausiami prie apatinės skersinės ašies pusės, kadangi savybė align-content nustatyta reikšme 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;
}

Pavyzdys . Reikšmė center

Dabar blokai išlygiuoti skersinės ašies centre:

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

Lygiavimas vertikalios ašies pradžioje garde (grid)

Nustatykime elementų lygiavimą garde (grid) vertikalios ašies pradžioje:

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

Lygiavimas vertikalios ašies centre garde (grid)

Dabar nustatykime elementų lygiavimą vertikalios ašies centre:

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

Lygiavimas vertikalios ašies pabaigoje garde (grid)

Nustatykime elementų lygiavimą vertikalios ašies pabaigoje:

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

Taip pat žiūrėkite

savybė flex-direction,
kuri nustato flex blokų ašių kryptį
savybė justify-content,
kuri nustato lygiavimą pagrindine ašimi
savybė align-items,
kuri nustato lygiavimą skersine ašimi
savybė flex-wrap,
kuri nustato flex blokų daugiaeiliškumą
savybė flex-flow,
sutrumpinimas flex-direction ir flex-wrap
savybė order,
kuri nustato flex blokų tvarką
savybė align-self,
kuri nustato vieno bloko lygiavimą
savybė place-content,
kuri nustato lygiavimą pagrindine ir skersine ašimis