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