Својство align-items

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

Синтакса

селектор {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

Вредности

Вредност	Опис
`flex-start`	Блокови су притиснути на почетак попречне (вертикалне) осе.
`flex-end`	Блокови су притиснути на крај попречне (вертикалне) осе.
`center`	Блокови стоје у центру попречне (вертикалне) осе.
`baseline`	Елементи се поравнавају по својој базној линији. Базна линија је замишљена линија која пролази доњим ивицом симбола без узимања спуштања, на пример, као код слова `'p'` и `'y'`.
`stretch`	Блокови су растегнути, заузимају све доступно место по попречној оси, притом се ипак узимају у обзир `min-width` и `max-width`, ако су задати. Ако је задата ширина и висина за елементе - `stretch` ће бити игнорисан.

Подразумевана вредност: stretch.

Пример . Вредност stretch

Сад је главна оса усмерена с лева на десно, а по попречној оси елементи су растегнути на целу висину:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Пример . Вредност stretch + димензије елемента

Сад је за елементе задата ширина и висина, па ће вредност stretch за својство align-items бити игнорисана:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Пример . Вредност flex-start без димензија елемента

Сад ће елементи бити притиснути на врх:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Пример . Вредност flex-start + димензије елемента

Сад ће елементи и даље бити притиснути на врх, међутим они ће имати задату ширину и висину:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Пример . Вредност flex-end + димензије елемента

Сад ће елементи бити притиснути на дно:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-end;
	flex-direction: row;
	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>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Пример . Вредност center, елементи различите величине

Сад елементи имају различиту величину по висини (сад се растављају текстом, али се може задати и height), ширина им је једнака, јер је задато својство width:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Пример . Вредност baseline, елементи различите величине

А овако изгледа поравнање по базној линији:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Пример . Поравнање по почетку вертикалне осе у мрежи

Хајде да поравнамо наше елементе унутар ћелија по почетку вертикалне осе:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: flex-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>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: 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 id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

А сад да видимо како изгледа наша мрежа кроз дебагер:

Погледајте такође

својство flex-direction,
које задаје смер оса flex блокова
својство justify-content,
које задаје поравнање по главној оси
својство align-items,
које задаје поравнање по попречној оси
својство flex-wrap,
које представља вишелинијскост flex блокова
својство flex-flow,
скраћеница за flex-direction и flex-wrap
својство order,
које задаје редослед flex блокова
својство align-self,
које задаје поравнање једног блока
својство flex-basis,
које задаје величину конкретног flex блока
својство flex-grow,
које задаје похлепност flex блокова
својство flex-shrink,
које задаје сабијање flex блокова
својство flex,
скраћеница за flex-grow, flex-shrink и flex-basis