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

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

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

Пример

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

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

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

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

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

Пример

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

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

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

Пример

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

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

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

Пример

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

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

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

Пример

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

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

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

Пример

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

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

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

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