# Выравнивание флекс блоков по поперечной оси в CSS

Давайте теперь будем выравнивать блоки и по поперечной оси. Выравнивание по этой оси задается свойством `align-items`. Значение `flex-start` прижимает элементы к началу оси, а значение `flex-end` - к концу.

Давайте попробуем на примерах.

## Пример

Направим главную ось слева направо. В этом случае поперечная ось будет направлена сверху вниз. Давайте порегулируем расположение наших блоков и по главной оси, и по перечной оси.

По главной оси прижмем блоки к ее началу, то есть к левому краю. Для этого `justify-content` установим в значение `flex-start`. По поперечной оси также прижмем блоки к ее началу, то есть к верхнему краю. Для этого `align-items` также установим в значение `flex-start`.

Посмотрим, что у нас получается:

`.parent { display: flex; flex-direction: row; /* главная ось направо, поперечная вниз */ justify-content: flex-start; /* блоки к началу главной оси */ align-items: flex-start; /* блоки к началу поперечной оси */ }`

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

## Пример

Давайте теперь прижмем блоки к концу поперечной оси, то есть к низу. Для этого `align-items` установим в значение `flex-end`:

`.parent { display: flex; flex-direction: row; /* главная ось направо, поперечная вниз */ justify-content: flex-start; /* блоки к началу главной оси */ align-items: flex-end; /* блоки к концу поперечной оси */ }`

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

## Пример

Направим теперь главную ось сверху вниз. Так как главная ось вертикальна, то поперечная будет направлена справа налево. Давайте прижмем блоки по обеим осям к их началу:

`.parent { display: flex; flex-direction: column; /* главная ось вниз, поперечная вправо */ justify-content: flex-start; /* блоки к началу главной оси */ align-items: flex-start; /* блоки к началу поперечной оси */ }`

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

## Пример

А теперь по поперечной оси прижмем блоки к ее концу:

`.parent { display: flex; flex-direction: column; /* главная ось вниз, поперечная вправо */ justify-content: flex-start; /* блоки к началу главной оси */ align-items: flex-end; /* блоки к концу поперечной оси */ }`

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

## Пример

Прижмем блоки к концу обеих осей:

`.parent { display: flex; flex-direction: column; /* главная ось вниз, поперечная вправо */ justify-content: flex-end; /* блоки к концу главной оси */ align-items: flex-end; /* блоки к концу поперечной оси */ }`

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

## Пример

Давайте поменяем направление главной оси - направим ее снизу вверх. При этом поперечная ось не изменит своего направления, так как главная ось по-прежнему вертикальна.

Прижмем блоки к началу обеих осей:

`.parent { display: flex; flex-direction: column-reverse; /* главная ось вверх, поперечная вправо */ justify-content: flex-start; /* блоки к началу главной оси */ align-items: flex-start; /* блоки к началу поперечной оси */ }`

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

## Практические задачи

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

← →
↑