Свойство 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