Свойство 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; /* блоки к концу главной оси */
}
Результат выполнения кода: