Пошук уроків, статей та іншого контенту
Збільшуйте елементи, коли в контейнері залишається вільний простір, використовуючи flex-grow.
flex-growВластивість flex-grow визначає, чи може flex-елемент збільшуватися, коли всередині flex-контейнера залишається вільний простір.
.item {
flex-grow: 1;
}За замовчуванням значення flex-grow дорівнює 0. Це означає, що елемент не розширюється, навіть якщо в контейнері є вільне місце.
Щоб властивість працювала, батьківський елемент має бути flex-контейнером:
.container {
display: flex;
}Значення flex-grow — це коефіцієнт, який визначає частку вільного простору для елемента.
.container {
display: flex;
width: 600px;
}
.item {
flex-grow: 1;
}Якщо три елементи мають flex-grow: 1, вони отримають однакові частини вільного простору.
.item {
flex-grow: 1;
}
.item-wide {
flex-grow: 2;
}У цьому випадку коефіцієнти дорівнюють:
перший елемент — 1 частина;
другий елемент — 1 частина;
широкий елемент — 2 частини.
Усього є 4 частини, тому широкий елемент отримає вдвічі більше вільного простору, ніж кожен із двох інших.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-grow</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 32px;
font-family: Arial, sans-serif;
background-color: #f3f4f6;
}
.cards {
display: flex;
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.card {
min-width: 0;
padding: 24px;
border-radius: 12px;
background-color: white;
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}
.card-small {
flex-grow: 1;
}
.card-large {
flex-grow: 2;
}
</style>
</head>
<body>
<div class="cards">
<article class="card card-small">
<h2>План Basic</h2>
<p>Основні можливості для невеликих проєктів.</p>
</article>
<article class="card card-large">
<h2>План Pro</h2>
<p>Розширені можливості для команд і великих проєктів.</p>
</article>
<article class="card card-small">
<h2>План Team</h2>
<p>Спільна робота над проєктами.</p>
</article>
</div>
</body>
</html>У цьому прикладі:
контейнер .cards використовує display: flex;
перша й третя картки мають flex-grow: 1;
центральна картка має flex-grow: 2;
центральна картка отримує вдвічі більше вільного простору.
Важливо, що flex-grow розподіляє саме вільний простір, а не встановлює фіксовану ширину елемента.
Flex-елементи спочатку мають базовий розмір. Він залежить від вмісту та властивості flex-basis.
.container {
display: flex;
width: 600px;
}
.item {
flex-grow: 1;
}Якщо в елементів різний початковий вміст, вони можуть мати різні базові розміри. Після цього браузер розподіляє залишок простору відповідно до значень flex-grow.
Щоб початковий розмір усіх елементів був однаковим, можна встановити flex-basis: 0:
.container {
display: flex;
}
.item {
flex-grow: 1;
flex-basis: 0;
}Тепер усі елементи починають розподіл із нульовою базою й отримують простір пропорційно до своїх коефіцієнтів.
Це часто записують коротше:
.item {
flex: 1 1 0;
}У цьому записі:
перше значення 1 — це flex-grow;
друге значення 1 — це flex-shrink;
третє значення 0 — це flex-basis.
Якщо всім елементам потрібна однакова ширина, достатньо:
.item {
flex: 1;
}Для зрозумілого контролю над розподілом можна використовувати повний запис:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}Іноді потрібно, щоб один елемент займав увесь доступний простір, а інший залишався розміром, необхідним для його вмісту.
<div class="toolbar">
<input class="search" type="search" placeholder="Пошук">
<button type="button">Увійти</button>
</div>.toolbar {
display: flex;
gap: 12px;
max-width: 600px;
}
.search {
flex-grow: 1;
min-width: 0;
}
button {
flex-grow: 0;
flex-shrink: 0;
padding: 10px 18px;
}Поле пошуку розширюється завдяки flex-grow: 1, а кнопка не забирає додатковий простір, оскільки має flex-grow: 0.
Властивість min-width: 0 для поля дозволяє йому стискатися в разі нестачі місця. Без цього довгий вміст іноді може перешкоджати очікуваному стисканню flex-елемента.
flex-grow і нестача просторуflex-grow працює лише тоді, коли в контейнері є позитивний вільний простір.
Якщо вміст елементів уже займає всю ширину контейнера, збільшувати їх немає куди. У такій ситуації flex-grow не дає додаткового ефекту.
.container {
display: flex;
width: 400px;
}
.item {
flex-grow: 1;
width: 300px;
}Якщо два елементи мають велику базову ширину, вільного простору може не залишитися. У такому разі flex-grow не збільшить їх.
Також flex-grow не створює вільний простір. Він лише розподіляє простір, який уже є в контейнері.
flex-grow та widthКоли для елемента задано і width, і flex-grow, ширина може бути використана як його базовий розмір. Вільний простір після цього розподіляється через flex-grow.
.container {
display: flex;
width: 800px;
}
.item {
width: 200px;
flex-grow: 1;
}Тут width: 200px задає початковий розмір, але елемент може стати ширшим, якщо в контейнері залишиться вільний простір.
Для рівного розподілу зазвичай зручніше використовувати flex-basis: 0 або скорочений запис flex: 1:
.item {
flex: 1;
}.item {
flex-grow: 1;
}Це не означає, що елемент завжди займатиме всю ширину. Він збільшиться лише за наявності вільного простору у flex-контейнері.
display: flex.container {
/* flex-grow дочірніх елементів не працюватиме як очікується */
}
.item {
flex-grow: 1;
}flex-grow має сенс лише для безпосередніх дочірніх елементів flex-контейнера.
Правильно:
.container {
display: flex;
}
.item {
flex-grow: 1;
}.first {
flex-grow: 1;
}
.second {
flex-grow: 2;
}Це не означає, що другий елемент завжди матиме рівно подвійну ширину. Коефіцієнти визначають розподіл вільного простору, а не повну ширину елементів.
Якщо потрібні рівні початкові розміри, використовуйте:
.first,
.second {
flex: 1;
}flex-grow у відсотках.item {
flex-grow: 50%;
}flex-grow приймає безрозмірне числове значення, а не відсоток.
Правильний варіант:
.item {
flex-grow: 1;
}flex-grow дозволяє flex-елементу збільшуватися у вільному просторі.
Значення за замовчуванням — 0.
Значення 1, 2, 3 визначають пропорції розподілу вільного простору.
Властивість працює лише для безпосередніх дочірніх елементів flex-контейнера.
flex-grow розподіляє вільний простір, але не задає фіксовану ширину.
Для однакових початкових розмірів зручно використовувати flex: 1 або flex-basis: 0.
Якщо простору немає, flex-grow не може збільшити елементи.