Свойство align-items задает выравнивание элементов вдоль поперечной оси.

Применяется к: родительскому элементу для flex блоков.

См. все flexbox свойства: flex-direction, justify-content, align-items, flex-wrap, flex-flow, align-self, order, flex-basis, flex-grow, flex-shrink, flex.

Синтаксис

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

Значения

Значение Описание
flex-start Блоки прижаты к началу поперечной оси.
flex-end Блоки прижаты к концу поперечной оси.
center Блоки стоят по центру поперечной оси.
baseline Элементы выравниваются по своей базовой линии. Базовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учета свисаний, например, как у букв 'ц', 'д', 'р', 'щ'.
stretch Блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width и max-width, если они заданы. Если же задана ширина и высота для элементов - stretch будет проигнорирован.

Значение по умолчанию: stretch.

Примеры

Пример . Значение stretch

Сейчас главная ось направлена слева направо (это делает flex-direction: row), а по побочной оси элементы растянуты на всю высоту:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
#parent {
	align-items: stretch;
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
}

Результат выполнения кода:

1
2
3
4
5

Пример . Значение stretch + размеры элемента

Сейчас для элементов задана ширина и высота, поэтому значение stretch для свойства align-items будет проигнорировано:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
#parent {
	align-items: stretch;
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

1
2
3
4
5

Пример . Значение flex-start без размеров элемента

Сейчас элементы будут прижаты к верху:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
#parent {
	align-items: flex-start;
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
}

Результат выполнения кода:

1
2
3
4
5

Пример . Значение flex-start + размеры элемента

Сейчас элементы по прежнему будут прижаты к верху, однако у них будет заданная ширина и высота:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
#parent {
	align-items: flex-start;
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

1
2
3
4
5

Пример . Значение flex-end + размеры элемента

Сейчас элементы будут прижаты к низу:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
#parent {
	align-items: flex-end;
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

1
2
3
4
5

Пример . Значение center + размеры элемента

Сейчас элементы будут стоять по центру по поперечной оси (в данном случае по вертикали):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
#parent {
	align-items: center;
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

1
2
3
4
5

Пример . Значение center, элементы разного размера

Сейчас элементы имеют разный размер по высоте (сейчас они раздвигаются текстом, но можно задать и height), ширина у всех одинаковая, так как задано свойство width.

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
#parent {
	align-items: center;
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
}

Результат выполнения кода:

1
1
1
2
2
3
4
5

Пример . Значение baseline, элементы разного размера

А вот так выглядит выравнивание по базовой линии align-items: baseline (сама линия выделена красным цветом):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
#parent {
	align-items: baseline;
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 130px;
	line-height: 1;
}

Результат выполнения кода:

1уб
2уб
3уб
4уб
5уб