мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Выравнивание флекс блоков по поперечной оси 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; /* блоки к началу поперечной оси */ }

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

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

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

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

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

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

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

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

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