Пошук уроків, статей та іншого контенту
Розберіться з напрямком головної осі та визначте, як уздовж неї розташовуються flex-елементи.
У Flexbox елементи розташовуються вздовж двох осей:
головна вісь — напрямок, у якому рухаються flex-елементи;
поперечна вісь — перпендикулярний напрямок.
Напрямок головної осі визначає властивість flex-direction.
Щоб елементи стали flex-елементами, їхній батьківський елемент потрібно зробити flex-контейнером:
.container {
display: flex;
}Після цього безпосередні дочірні елементи .container стають flex-елементами.
rowЗа замовчуванням використовується:
.container {
display: flex;
flex-direction: row;
}Значення row розташовує елементи уздовж горизонтальної осі — зліва направо.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.container {
display: flex;
flex-direction: row;
gap: 10px;
}
.item {
padding: 20px;
background-color: lightblue;
}Результат:
1 2 3Значення row можна не вказувати явно, адже воно є значенням за замовчуванням:
.container {
display: flex;
}Це рівнозначно:
.container {
display: flex;
flex-direction: row;
}У напрямку row головна вісь проходить горизонтально:
початок головної осі → 1 → 2 → 3 → кінець головної осіcolumnЗначення column розташовує елементи вертикально — зверху вниз:
.container {
display: flex;
flex-direction: column;
}1
2
3Повний приклад:
<div class="container">
<div class="item">Перший</div>
<div class="item">Другий</div>
<div class="item">Третій</div>
</div>.container {
display: flex;
flex-direction: column;
gap: 10px;
}
.item {
padding: 20px;
background-color: lightgreen;
}У напрямку column головна вісь проходить вертикально:
початок головної осі
↓
1
2
3
↓
кінець головної осіОтже:
row — головна вісь горизонтальна;
column — головна вісь вертикальна.
row-reverse і column-reverseВластивість flex-direction також має зворотні значення.
row-reverseЕлементи розташовуються горизонтально, але у зворотному напрямку:
.container {
display: flex;
flex-direction: row-reverse;
}3 2 1column-reverseЕлементи розташовуються вертикально знизу вгору:
.container {
display: flex;
flex-direction: column-reverse;
}3
2
1Для початкового розуміння Flexbox найчастіше достатньо значень row і column.
Для керування розташуванням елементів уздовж головної осі використовується властивість justify-content.
Її результат залежить від значення flex-direction:
за row елементи вирівнюються горизонтально;
за column елементи вирівнюються вертикально.
flex-startЕлементи розташовуються на початку головної осі. Це значення за замовчуванням.
.container {
display: flex;
justify-content: flex-start;
}Для row:
1 2 3Для column:
1
2
3flex-endЕлементи розташовуються в кінці головної осі:
.container {
display: flex;
justify-content: flex-end;
}За напрямку row елементи перемістяться праворуч, а за column — вниз.
centerЕлементи групуються в центрі головної осі:
.container {
display: flex;
justify-content: center;
}За напрямку row:
1 2 3За напрямку column:
1
2
3space-betweenПерший елемент опиняється на початку, останній — у кінці, а вільний простір розподіляється між елементами:
.container {
display: flex;
justify-content: space-between;
}1 2 3space-aroundНавколо кожного елемента створюється однаковий простір:
.container {
display: flex;
justify-content: space-around;
}space-evenlyПростір між елементами, а також між крайніми елементами й межами контейнера стає однаковим:
.container {
display: flex;
justify-content: space-evenly;
}У цьому прикладі напрямок головної осі змінюється за допомогою flex-direction, а елементи центруються уздовж цієї осі:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Головна вісь Flexbox</title>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 500px;
padding: 20px;
border: 2px solid #333;
background-color: #f2f2f2;
}
.item {
padding: 20px;
background-color: #8ecae6;
border: 1px solid #219ebc;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>У цьому прикладі:
display: flex створює flex-контейнер.
flex-direction: row встановлює горизонтальну головну вісь.
justify-content: space-between розподіляє вільний простір між елементами.
gap не використовується, тому що відстань створюється саме через space-between.
Якщо замінити:
flex-direction: row;на:
flex-direction: column;головна вісь стане вертикальною. Тоді justify-content: space-between розподілятиме вільний простір зверху вниз.
Щоб визначити головну вісь flex-контейнера, виконайте два кроки:
Знайдіть значення flex-direction.
Перевірте напрямок, указаний цим значенням.
.container {
display: flex;
flex-direction: row;
}Головна вісь — горизонтальна.
.container {
display: flex;
flex-direction: column;
}Головна вісь — вертикальна.
Після цього можна зрозуміти, як працює justify-content:
.container {
display: flex;
flex-direction: column;
justify-content: center;
}У цьому випадку елементи будуть розташовані по центру вертикально, тому що головна вісь має напрямок column.
justify-content завжди вирівнює по горизонталіjustify-content працює вздовж головної осі, а не завжди горизонтально.
.container {
display: flex;
flex-direction: column;
justify-content: center;
}Тут елементи центруються вертикально.
display: flexВластивість flex-direction не працює на звичайному контейнері:
.container {
flex-direction: column;
}Спочатку потрібно додати:
.container {
display: flex;
flex-direction: column;
}flex-direction: row-reverse не змінює HTML-код. Воно змінює візуальний напрямок розташування елементів у flex-контейнері.
Вирівнювання за допомогою justify-content помітне лише тоді, коли в контейнері є вільний простір уздовж головної осі. Якщо елементи займають усю доступну ширину або висоту, переміщувати їх уже нікуди.
Flex-контейнер створюється властивістю display: flex.
Головну вісь визначає властивість flex-direction.
row розташовує елементи горизонтально.
column розташовує елементи вертикально.
row-reverse і column-reverse змінюють напрямок на зворотний.
justify-content вирівнює елементи вздовж головної осі.
Напрямок роботи justify-content залежить від flex-direction.
За замовчуванням використовується flex-direction: row.