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