Пошук уроків, статей та іншого контенту
Керуйте розподілом flex-елементів уздовж головної осі за допомогою властивості justify-content.
Flexbox розподіляє елементи вздовж двох осей:
головна вісь — напрямок, у якому розташовані flex-елементи;
поперечна вісь — перпендикулярний напрямок.
Напрямок головної осі визначає властивість flex-direction:
row — зліва направо, значення за замовчуванням;
row-reverse — справа наліво;
column — зверху вниз;
column-reverse — знизу вгору.
Властивість justify-content керує розподілом вільного простору вздовж головної осі.
.container {
display: flex;
justify-content: center;
}Якщо flex-direction: row, елементи вирівнюються горизонтально. Якщо flex-direction: column, вони вирівнюються вертикально.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>justify-content</title>
<style>
.container {
display: flex;
justify-content: center;
width: 600px;
padding: 20px;
background-color: #e5e7eb;
}
.item {
width: 80px;
padding: 20px 0;
color: white;
text-align: center;
background-color: #2563eb;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>Контейнер ширший за свої елементи, тому всередині нього залишається вільний простір. Значення center розміщує всі елементи по центру головної осі.
justify-contentflex-startЕлементи розташовуються на початку головної осі. Це значення використовується за замовчуванням.
.container {
display: flex;
justify-content: flex-start;
}Для напрямку row елементи будуть притиснуті до лівого краю контейнера.
flex-endЕлементи розташовуються в кінці головної осі.
.container {
display: flex;
justify-content: flex-end;
}Для напрямку row елементи будуть притиснуті до правого краю контейнера.
centerЕлементи групуються по центру контейнера.
.container {
display: flex;
justify-content: center;
}Вільний простір розподіляється порівну перед групою елементів і після неї.
space-betweenПерший елемент розташовується на початку, останній — у кінці, а вільний простір рівномірно розподіляється між елементами.
.container {
display: flex;
justify-content: space-between;
}Для трьох елементів результат виглядатиме приблизно так:
[1] [2] [3]Між елементами є однакові проміжки, але по краях контейнера додаткового проміжку немає.
space-aroundНавколо кожного елемента створюється однаковий простір.
.container {
display: flex;
justify-content: space-around;
}Проміжок між сусідніми елементами буде вдвічі більшим за проміжок між крайнім елементом і краєм контейнера. Це відбувається тому, що кожен елемент отримує простір з обох боків.
space-evenlyВільний простір розподіляється так, щоб усі проміжки були однаковими:
між лівим краєм і першим елементом;
між сусідніми елементами;
між останнім елементом і правим краєм.
.container {
display: flex;
justify-content: space-evenly;
}Приклад результату:
[1] [2] [3]У прикладі нижче кожен рядок використовує окреме значення justify-content.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Значення justify-content</title>
<style>
.row {
display: flex;
width: 500px;
margin-bottom: 12px;
padding: 10px;
background-color: #e5e7eb;
border: 1px solid #9ca3af;
}
.item {
width: 50px;
padding: 10px 0;
color: white;
text-align: center;
background-color: #2563eb;
border-radius: 4px;
}
.start {
justify-content: flex-start;
}
.end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.between {
justify-content: space-between;
}
.around {
justify-content: space-around;
}
.evenly {
justify-content: space-evenly;
}
</style>
</head>
<body>
<div class="row start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row between">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row around">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row evenly">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>justify-content разом із flex-directionjustify-content завжди працює вздовж головної осі, а не обов’язково горизонтально.
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
}У цьому прикладі:
головна вісь спрямована зверху вниз;
space-between розподіляє простір між елементами вертикально;
перший елемент буде зверху, останній — знизу.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Вертикальний розподіл</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 180px;
height: 300px;
padding: 16px;
background-color: #e5e7eb;
}
.item {
padding: 16px;
color: white;
text-align: center;
background-color: #2563eb;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Верх</div>
<div class="item">Центр</div>
<div class="item">Низ</div>
</div>
</body>
</html>Щоб вертикальний розподіл був помітним, контейнеру потрібно задати висоту. Якщо висота контейнера дорівнює сумарній висоті елементів, вільного простору для розподілу не залишиться.
justify-content розподіляє саме вільний простір. Якщо елементи займають усю ширину контейнера або не вміщуються в нього, ефект деяких значень може бути непомітним.
.container {
display: flex;
justify-content: center;
width: 300px;
}
.item {
width: 100px;
}Три елементи по 100px уже займають усі 300px контейнера. Вільного простору немає, тому center, space-between та інші значення не зможуть змінити розташування.
Якщо елементи не вміщуються, перевірте їхню сумарну ширину, відступи та властивість flex-wrap.
justify-content і gapjustify-content розподіляє вільний простір контейнера. gap задає фіксований проміжок між flex-елементами.
.container {
display: flex;
justify-content: center;
gap: 20px;
}У цьому прикладі:
gap: 20px створює проміжок у 20px між елементами;
justify-content: center розміщує всю групу елементів по центру;
решта вільного простору розподіляється по краях групи.
Якщо потрібно отримати однакові відстані між елементами та краями контейнера, можна використати justify-content: space-evenly. Якщо потрібен точний фіксований проміжок, зручніше застосувати gap.
justify-content працює для елементів усередині flex-контейнера. Тому батьківський елемент повинен мати display: flex.
.container {
display: flex;
justify-content: center;
}Якщо display: flex відсутній, дочірні елементи не є flex-елементами, і властивість не дасть очікуваного результату.
rowЗа замовчуванням головна вісь горизонтальна:
.container {
display: flex; /* flex-direction: row */
justify-content: center;
}Тут justify-content центрує елементи горизонтально. Для вертикального вирівнювання в такому контейнері зазвичай застосовують інші властивості, які керують поперечною віссю.
Якщо елементи повністю заповнюють контейнер, justify-content не має простору для роботи. Зменште ширину елементів, збільшіть ширину контейнера або перевірте відступи.
space-around і space-evenlyspace-around створює навколо кожного елемента однаковий внутрішній простір, тому крайові проміжки виходять меншими;
space-evenly робить усі проміжки, включно з крайовими, однаковими.
Створіть навігаційне меню:
контейнер має бути flex-контейнером;
перший пункт розташовується на початку;
останній пункт — у кінці;
простір між пунктами розподіляється рівномірно.
Для цього використайте justify-content: space-between.
Потім змініть значення на center, space-around і space-evenly та порівняйте результат.
justify-content розподіляє flex-елементи вздовж головної осі.
Напрямок головної осі визначає flex-direction.
Для row головна вісь горизонтальна, для column — вертикальна.
flex-start розташовує елементи на початку осі.
flex-end розташовує елементи в кінці осі.
center центрує групу елементів.
space-between розподіляє простір між елементами без проміжків по краях.
space-around створює простір навколо кожного елемента.
space-evenly робить усі проміжки однаковими.
Властивість працює лише тоді, коли контейнер має вільний простір і display: flex.