Пошук уроків, статей та іншого контенту
Створюйте рівномірні проміжки між flex-елементами за допомогою властивості gap.
gapВластивість gap задає проміжок між елементами всередині flex-контейнера.
Вона допомагає рівномірно розміщувати елементи без додавання зовнішніх відступів до кожного з них.
.container {
display: flex;
gap: 20px;
}У цьому прикладі між усіма flex-елементами буде проміжок 20px.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Приклад gap</title>
<style>
.menu {
display: flex;
gap: 16px;
padding: 20px;
background-color: #eeeeee;
}
.menu-item {
padding: 12px 20px;
background-color: #4f46e5;
color: white;
border-radius: 6px;
}
</style>
</head>
<body>
<nav class="menu">
<a class="menu-item" href="#">Головна</a>
<a class="menu-item" href="#">Про нас</a>
<a class="menu-item" href="#">Контакти</a>
</nav>
</body>
</html>Властивість gap застосована до контейнера .menu, а не до його дочірніх елементів. Між посиланнями з’явиться однаковий проміжок 16px.
За замовчуванням flex-елементи розташовуються в рядок:
.container {
display: flex;
gap: 20px;
}У такому випадку проміжок буде горизонтальним.
Якщо змінити напрямок на вертикальний, gap створюватиме вертикальні проміжки:
.container {
display: flex;
flex-direction: column;
gap: 20px;
}Приклад:
<div class="list">
<div>Перший елемент</div>
<div>Другий елемент</div>
<div>Третій елемент</div>
</div>.list {
display: flex;
flex-direction: column;
gap: 12px;
}
.list div {
padding: 16px;
background-color: lightblue;
}Для окремого налаштування горизонтального та вертикального проміжків використовують:
column-gap — проміжок між елементами по горизонталі;
row-gap — проміжок між рядками по вертикалі.
.container {
display: flex;
flex-wrap: wrap;
column-gap: 24px;
row-gap: 16px;
}У цьому прикладі:
між елементами в одному рядку буде 24px;
між рядками буде 16px.
Щоб flex-елементи могли переноситися на новий рядок, потрібна властивість flex-wrap: wrap.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Проміжки між рядками</title>
<style>
.cards {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 20px;
width: 500px;
}
.card {
box-sizing: border-box;
width: 150px;
padding: 20px;
background-color: #dbeafe;
border: 1px solid #60a5fa;
}
</style>
</head>
<body>
<div class="cards">
<div class="card">Картка 1</div>
<div class="card">Картка 2</div>
<div class="card">Картка 3</div>
<div class="card">Картка 4</div>
<div class="card">Картка 5</div>
</div>
</body>
</html>Властивість gap є скороченим записом для row-gap і column-gap.
Якщо вказати одне значення:
.container {
gap: 20px;
}Це означає:
.container {
row-gap: 20px;
column-gap: 20px;
}Якщо вказати два значення:
.container {
gap: 10px 24px;
}Перше значення задає вертикальний проміжок між рядками, а друге — горизонтальний проміжок між колонками:
.container {
row-gap: 10px;
column-gap: 24px;
}gap і зовнішні відступиДля створення проміжків між flex-елементами можна було б використати margin:
.item {
margin-right: 20px;
}Але такий підхід має недоліки:
останньому елементу часто потрібно прибирати відступ;
відступи можуть з’являтися з країв контейнера;
складніше налаштовувати проміжки між рядками;
правила стають менш зрозумілими.
Властивість gap призначена саме для проміжків між елементами:
.container {
display: flex;
gap: 20px;
}Вона не створює додаткового проміжку перед першим або після останнього елемента.
gap не до flex-контейнераgap працює для дочірніх елементів контейнера, який має display: flex.
Неправильно:
.item {
gap: 20px;
}Правильно:
.container {
display: flex;
gap: 20px;
}gap створює проміжки лише між елементами. Він не додає відступів перед першим і після останнього елемента.
Якщо потрібен внутрішній відступ від країв контейнера, використовуйте padding:
.container {
display: flex;
gap: 20px;
padding: 20px;
}gap і paddinggap — відстань між дочірніми елементами;
padding — внутрішня відстань між вмістом і краями контейнера.
.container {
display: flex;
gap: 16px;
padding: 24px;
}Тут gap задає відстань між елементами, а padding — відстань елементів від країв контейнера.
Створіть горизонтальну групу кнопок:
Зробіть контейнер flex-контейнером.
Додайте між кнопками проміжок 12px.
Додайте контейнеру внутрішній відступ 16px.
Перевірте, що проміжку перед першою кнопкою та після останньої немає, крім відступу, створеного padding.
<div class="buttons">
<button>Зберегти</button>
<button>Скасувати</button>
<button>Видалити</button>
</div>.buttons {
display: flex;
gap: 12px;
padding: 16px;
}
button {
padding: 10px 16px;
border: 0;
border-radius: 4px;
background-color: #2563eb;
color: white;
cursor: pointer;
}gap задає проміжки між flex-елементами.
Властивість потрібно застосовувати до flex-контейнера.
gap: 20px задає однаковий проміжок у всіх напрямках.
gap: 10px 24px задає вертикальний і горизонтальний проміжки окремо.
row-gap налаштовує проміжки між рядками.
column-gap налаштовує проміжки між елементами в рядку.
gap не додає відступів перед першим і після останнього елемента.
Для відступу від країв контейнера використовуйте padding.