тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Выравнивание флекс элементов по главной оси

Свойство justify-content позволяет выравнивать элементы по главной оси. Ранее вы уже проходили значения center, space-between, space-around, space-evenly. Давайте теперь изучим еще несколько значений.

Значение flex-start прижимает элементы к началу главной оси, а значение flex-end - к концу. Давайте посмотрим на примерах.

Пример

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

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

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

Пример

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

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

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

Пример

Направим теперь главную ось справа налево, задав свойству flex-direction значение row-reverse. Прижмем блоки к началу оси, то есть к правому краю. Для этого justify-content установим в значение flex-start:

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

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

Пример

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

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

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

Пример

В предыдущих примерах главная ось была направлена горизонтально. Давайте теперь перевернем ее и направим вертикально.

Давайте направим главную ось вниз, задав свойству flex-direction значение column.

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

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

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

Пример

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

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

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

Пример

Перевернем главную ось, направив ее снизу вверх. Для этого свойству flex-direction зададим значение column-reverse. В этом случае блоки поменяют свой порядок - в начале оси будет стоять последний в HTML коде блок.

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

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

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

Пример

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

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

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

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

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

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

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

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

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