# Свойство align-items

Свойство `align-items` задает выравнивание элементов вдоль поперечной оси для 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

Сейчас главная ось направлена слева направо, а по поперечной оси элементы растянуты на всю высоту:

`<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`

← →
↑
en ru