Давайте тепер вирівнюватимемо блоки і
по поперечній осі. Вирівнювання по цій осі
задається властивістю align-items. Значенyz
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; /* блоки до початку поперечної осі */
}
Результат виконання коду: