Уласцівасць align-content

Уласцівасць align-content задае выраўноўванне элементаў уздоўж папярочнай восі для flex-блокаў і па вертыкальнай восі для грідаў. Ужываецца да бацькоўскага элемента.

Сінтаксіс

селектар {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Значэнні

Значэнне	Апісанне
`flex-start`	Блокі прыціснуты да пачатку папярочнай (вертыкальнай) восі.
`flex-end`	Блокі прыціснуты да канца папярочнай (вертыкальнай) восі.
`center`	Блокі стаяць па цэнтры папярочнай (вертыкальнай) восі.
`space-between`	Блокі размеркаваны ўздоўж папярочнай (вертыкальнай) восі, пры гэтым першы элемент прыціснуты да пачатку восі, а апошні - да канца.
`space-around`	Блокі размеркаваны ўздоўж папярочнай (вертыкальнай) восі, пры гэтым паміж першым блокам і пачаткам восі, апошнім блокам і канцом восі такі ж прамежак, як і паміж астатнімі блокамі. Аднак, яны не роўныя, як магло здацца: прамежкі сумуюцца і паміж двума блокамі адлегласць у два разы большая, чым паміж блокам і пачаткам/канцом восі.

Прыклад . Значэнне flex-start

У гэтым прыкладзе вось, па якой ідзе выраўноўванне, накіравана зверху ўніз, г.зн. яна з'яўляецца папярочнай. Як відаць з атрыманага выніку, усе нашы элементы прыціснуты да яе верхняй часткі:

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

Прыклад . Значэнне flex-end

У гэтым прыкладзе блокі прыціснуты да ніжняга боку папярочнай восі, таму што ўласцівасць align-content зададзена ў значэнні 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;
}

Прыклад . Значэнне center

Зараз блокі выраўнаваны па цэнтры папярочнай восі:

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

Выраўноўванне па пачатку вертыкальнай восі ў грідзе

Давайце ўсталюем выраўноўванне для нашых элементаў у грідзе па пачатку вертыкальнай восі:

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

Выраўноўванне па цэнтры вертыкальнай восі ў грідзе

А цяпер давайце ўсталюем выраўноўванне элементаў па цэнтры вертыкальнай восі:

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

Выраўноўванне па канцы вертыкальнай восі ў грідзе

Давайце ўсталюем выраўноўванне элементаў па канцы вертыкальнай восі:

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

Глядзіце таксама

уласцівасць flex-direction,
якое задае напрамак восей flex-блокаў
уласцівасць justify-content,
якое задае выраўноўванне па галоўнай восі
уласцівасць align-items,
якое задае выраўноўванне па папярочнай восі
уласцівасць flex-wrap,
якое задае шматрадковасць flex-блокаў
уласцівасць flex-flow,
скарачэнне для flex-direction і flex-wrap
уласцівасць order,
якое задае парадак flex-блокаў
уласцівасць align-self,
якое задае выраўноўванне аднаго блока
уласцівасць place-content,
якое задае выраўноўванне па галоўнай і папярочнай восях