Својството align-content

Својството align-content го задава усогласувањето на елементите долж попречната оска за flex блокови и по вертикалната оска за grid-ови. Се применува на родителскиот елемент.

Синтакса

селектор {
	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;
}

Усогласување по почеток на вертикална оска во grid

Ајде да го поставиме усогласувањето за нашите елементи во grid-от по почетокот на вертикалната оска:

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

Усогласување по центар на вертикална оска во grid

А сега ајде да го поставиме усогласувањето на елементите по центарот на вертикалната оска:

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

Усогласување по крај на вертикална оска во grid

Ајде да го поставиме усогласувањето на елементите по крајот на вертикалната оска:

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