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