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

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

Синтакса

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

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

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

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

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

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

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

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

Ајде да погледнеме како изгледа grid мрежата во debugger-от:

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

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

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

А сега да погледнеме како изгледа нашата grid мрежа преку debugger-от:

Погледнете исто така

својството flex-direction,
кое го одредува насоката на оските на flex блоковите
својството justify-content,
кое го одредува усогласувањето по главната оска
својството align-items,
кое го одредува усогласувањето по попречната оска
својството flex-wrap,
кое го одредува 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