Давайте теперь будем выравнивать блоки и
по поперечной оси. Выравнивание по этой оси
задается свойством 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; /* блоки к началу поперечной оси */
}
Результат выполнения кода: