Свойство 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,
което задава подравняване по главната и напречната оси