Пошук уроків, статей та іншого контенту
З’ясуйте, як працює поперечна вісь і як вона визначає перпендикулярний напрямок вирівнювання.
У Flexbox кожен flex-контейнер має дві осі:
головну вісь — напрямок, у якому розташовуються flex-елементи;
поперечну вісь — напрямок, перпендикулярний до головної осі.
Напрямок головної осі визначає властивість flex-direction. Поперечна вісь автоматично визначається як перпендикулярна до неї.
| flex-direction | Головна вісь | Поперечна вісь | |---|---|---| | row | горизонтальна | вертикальна | | row-reverse | горизонтальна | вертикальна | | column | вертикальна | горизонтальна | | column-reverse | вертикальна | горизонтальна |
За замовчуванням використовується flex-direction: row, тому головна вісь проходить зліва направо, а поперечна — зверху вниз.
Для вирівнювання елементів уздовж поперечної осі використовують властивість align-items.
.container {
display: flex;
align-items: center;
}Значення center розташовує всі flex-елементи по центру поперечної осі.
Наприклад, за стандартного flex-direction: row поперечна вісь вертикальна. Тому align-items: center вирівнює елементи вертикально.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Поперечна вісь Flexbox</title>
<style>
.container {
display: flex;
align-items: center;
gap: 16px;
height: 200px;
padding: 16px;
background-color: #e5e7eb;
}
.item {
width: 100px;
padding: 20px 8px;
text-align: center;
color: white;
background-color: #2563eb;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Перший</div>
<div class="item">Другий</div>
<div class="item">Третій</div>
</div>
</body>
</html>У цьому прикладі:
display: flex створює flex-контейнер;
головна вісь за замовчуванням горизонтальна;
поперечна вісь вертикальна;
align-items: center центрує елементи по вертикалі;
height: 200px створює вільний простір для вертикального вирівнювання.
align-itemsstretchЗначення за замовчуванням. Елементи розтягуються вздовж поперечної осі, якщо для відповідного розміру не задано фіксоване значення.
.container {
display: flex;
align-items: stretch;
}Для горизонтального flex-контейнера елементи можуть розтягуватися по висоті контейнера.
flex-startЕлементи притискаються до початку поперечної осі.
.container {
display: flex;
align-items: flex-start;
}За flex-direction: row елементи розташуються біля верхнього краю контейнера.
flex-endЕлементи притискаються до кінця поперечної осі.
.container {
display: flex;
align-items: flex-end;
}За flex-direction: row елементи розташуються біля нижнього краю контейнера.
centerЕлементи розташовуються по центру поперечної осі.
.container {
display: flex;
align-items: center;
}baselineЕлементи вирівнюються за базовою лінією тексту.
.container {
display: flex;
align-items: baseline;
}Це корисно, коли в елементах є текст різного розміру і потрібно, щоб текстові рядки стояли на одній лінії.
columnЯкщо встановити flex-direction: column, головна вісь стане вертикальною. Відповідно, поперечна вісь стане горизонтальною.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Поперечна вісь у column</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 300px;
padding: 20px;
background-color: #e5e7eb;
}
.item {
width: 120px;
padding: 12px;
text-align: center;
color: white;
background-color: #16a34a;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Перший</div>
<div class="item">Другий</div>
<div class="item">Третій</div>
</div>
</body>
</html>Тут:
flex-direction: column розташовує елементи вертикально;
головна вісь проходить зверху вниз;
поперечна вісь проходить зліва направо;
align-items: center центрує елементи горизонтально.
Отже, одна й та сама властивість align-items: center працює в різних напрямках:
для row — центрує елементи вертикально;
для column — центрує елементи горизонтально.
Властивість align-self змінює вирівнювання лише для одного flex-елемента. Вона має ті самі основні значення, що й align-items.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Вирівнювання одного елемента</title>
<style>
.container {
display: flex;
align-items: center;
gap: 12px;
height: 180px;
padding: 16px;
background-color: #e5e7eb;
}
.item {
padding: 20px;
color: white;
background-color: #7c3aed;
border-radius: 8px;
}
.special {
align-self: flex-start;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Звичайний</div>
<div class="item special">Окремий</div>
<div class="item">Звичайний</div>
</div>
</body>
</html>У контейнера задано align-items: center, тому всі елементи мають бути по центру вертикально. Але клас .special змінює це правило для другого елемента:
.special {
align-self: flex-start;
}Другий елемент переміщується до початку поперечної осі, тобто до верхнього краю контейнера.
align-items і justify-contentЦі властивості відповідають за різні осі:
justify-content вирівнює елементи вздовж головної осі;
align-items вирівнює елементи вздовж поперечної осі.
Для контейнера з flex-direction: row:
.container {
display: flex;
justify-content: center; /* по горизонталі */
align-items: center; /* по вертикалі */
}Так можна розташувати елементи по центру контейнера в обох напрямках.
Однак після зміни напрямку на column ролі напрямків змінюються:
.container {
display: flex;
flex-direction: column;
justify-content: center; /* по вертикалі */
align-items: center; /* по горизонталі */
}Тому під час роботи з Flexbox важливо спочатку визначити головну вісь, а вже потім вирішувати, яка властивість відповідає за потрібний напрямок.
align-items і вертикальне вирівнюванняalign-items не завжди вирівнює елементи вертикально. Це залежить від flex-direction.
у row поперечна вісь вертикальна;
у column поперечна вісь горизонтальна.
Щоб побачити ефект вирівнювання, контейнер повинен мати вільний простір уздовж поперечної осі.
Наприклад, у контейнері без заданої висоти вертикальне центрування може бути непомітним:
.container {
display: flex;
align-items: center;
}Якщо додати висоту, результат стане очевидним:
.container {
display: flex;
align-items: center;
height: 200px;
}align-items вплине лише на один елементalign-items застосовується до всіх flex-елементів контейнера. Для індивідуального вирівнювання використовуйте align-self.
row-reverse змінює поперечну вісьrow-reverse змінює порядок і напрямок головної осі, але поперечна вісь залишається вертикальною.
Flexbox має головну та поперечну осі.
Поперечна вісь завжди перпендикулярна до головної.
При flex-direction: row поперечна вісь вертикальна.
При flex-direction: column поперечна вісь горизонтальна.
align-items вирівнює всі елементи вздовж поперечної осі.
align-self змінює вирівнювання одного елемента.
Щоб правильно використовувати align-items, спочатку визначте значення flex-direction.