Пошук уроків, статей та іншого контенту
Навчіться переносити елементи на нові рядки або колонки за допомогою властивості flex-wrap.
Flex-контейнер за замовчуванням намагається розмістити всі дочірні елементи в одному рядку або колонці. Якщо місця недостатньо, елементи можуть стискатися.
Властивість flex-wrap визначає, чи можуть flex-елементи переноситися на новий рядок або в нову колонку.
.container {
display: flex;
flex-wrap: wrap;
}Щоб властивість працювала, батьківський елемент має бути flex-контейнером:
.container {
display: flex;
}flex-wrapnowrapЦе значення використовується за замовчуванням:
.container {
display: flex;
flex-wrap: nowrap;
}Усі елементи залишаються в одному рядку або колонці. Якщо місця недостатньо, flexbox намагатиметься зменшити ширину або висоту елементів.
wrapЗначення wrap дозволяє переносити елементи на новий рядок:
.container {
display: flex;
flex-wrap: wrap;
}Якщо елементи більше не вміщуються по ширині контейнера, наступні елементи переходять на новий рядок.
wrap-reverseЗначення wrap-reverse також переносить елементи, але нові рядки розміщуються у зворотному напрямку поперечної осі:
.container {
display: flex;
flex-wrap: wrap-reverse;
}Для звичайного напрямку row нові рядки з'являються зверху, а не знизу.
У цьому прикладі контейнер має ширину 600px, а кожна картка — ширину 180px. Три картки можуть розміститися в одному рядку, а четверта переноситься на наступний.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Перенесення flex-елементів</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
max-width: 600px;
margin: 0 auto;
padding: 16px;
background-color: white;
border: 2px solid #333;
}
.card {
flex: 0 0 180px;
padding: 24px;
text-align: center;
color: white;
background-color: #2878c8;
border-radius: 8px;
}
</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>У властивості:
flex: 0 0 180px;останнє значення задає базову ширину елемента — 180px. Завдяки цьому картки не стискаються і стає добре видно момент перенесення.
Властивість gap додає проміжок між картками:
gap: 16px;За замовчуванням flex-елементи розміщуються в рядку, оскільки flex-direction має значення row.
Якщо змінити напрямок на column, елементи розташовуватимуться вертикально:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}У такому випадку для перенесення елементів потрібна обмежена висота контейнера:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
}Елементи, які не поміщаються по висоті, переходять у наступну колонку.
Напрямок перенесення залежить від flex-direction:
row — елементи переносяться на нові рядки;
column — елементи переносяться у нові колонки;
row-reverse і column-reverse змінюють напрямок розташування елементів.
nowrap і wrapРозглянемо два контейнери з однаковими елементами:
<div class="container nowrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="container wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>.container {
display: flex;
width: 400px;
gap: 10px;
margin-bottom: 20px;
padding: 10px;
border: 2px solid #333;
}
.item {
flex: 0 0 120px;
padding: 20px;
text-align: center;
background-color: lightblue;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap;
}У першому контейнері всі елементи залишаються в одному рядку. У другому контейнері елементи, для яких не вистачило місця, переходять на новий рядок.
flex-wrap часто застосовують для:
списків карток товарів;
галерей;
кнопок;
тегів;
пунктів меню;
блоків із різною шириною;
адаптивних компонентів.
Наприклад, список тегів може автоматично переноситися на нові рядки:
<div class="tags">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">JavaScript</span>
<span class="tag">Адаптивність</span>
</div>.tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 500px;
}
.tag {
padding: 8px 12px;
color: white;
background-color: #555;
border-radius: 16px;
}Коли ширина контейнера зменшується, теги автоматично переходять на наступні рядки.
display: flexflex-wrap працює лише для flex-контейнера:
.container {
flex-wrap: wrap;
}Такий код не матиме потрібного ефекту, якщо не додати:
.container {
display: flex;
}Якщо контейнер має достатньо місця, перенесення не відбудеться. Щоб побачити його, контейнер має бути обмежений за шириною або висотою.
.container {
display: flex;
flex-wrap: wrap;
width: 400px;
}За замовчуванням flex-елементи можуть стискатися. Якщо потрібно зберегти їхню ширину, можна заборонити стискання:
.item {
flex-shrink: 0;
width: 150px;
}Або використати скорочений запис:
.item {
flex: 0 0 150px;
}flex-wrap і flex-directionflex-direction визначає основний напрямок розміщення елементів, а flex-wrap — чи можуть вони переходити на нову лінію.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}У цьому прикладі елементи розташовуються по рядках і переносяться на наступні рядки.
flex-wrap визначає, чи можуть flex-елементи переноситися.
Значення nowrap забороняє перенесення і є стандартним.
Значення wrap переносить елементи на наступний рядок або в наступну колонку.
Значення wrap-reverse переносить елементи у зворотному напрямку.
Для row перенесення відбувається на нові рядки.
Для column перенесення відбувається у нові колонки.
Щоб перенесення було помітним, контейнеру зазвичай задають обмежену ширину або висоту.
flex-wrap працює лише разом із display: flex або display: inline-flex.