Урок 86 із 104
83%
← Назад

Жадібність flex-елементів у CSS

Вивчаємо властивість flex-grow, яка дозволяє flex-елементам ділити між собою вільний простір контейнера пропорційно до заданих значень.

Що таке flex-grow

Якщо сума базових розмірів flex-елементів менша за розмір flex-контейнера вздовж головної осі, у контейнері залишається вільний простір. За замовчуванням цей простір не розподіляється між елементами.

Властивість flex-grow визначає, яку частину вільного простору може отримати flex-елемент. Значенням flex-grow є безрозмірне число.

Чим більше значення flex-grow у елемента порівняно з іншими елементами, тим більшу частину вільного простору він отримає.

flex-grow без вільного простору

Розглянемо контейнер шириною 300px та два flex-елементи шириною по 100px. Разом елементи займають 200px, тому залишається 100px вільного простору.


<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Як flex-grow ділить вільний простір

Щоб flex-grow розподілив вільний простір, потрібно врахувати значення flex-grow усіх flex-елементів. Спочатку визначаємо суму їхніх значень, потім ділимо вільний простір на цю суму.

  • Визначаємо вільний простір контейнера.
  • Додаємо значення flex-grow усіх елементів.
  • Ділимо вільний простір на отриману суму.
  • Отримане число показує, скільки вільного простору припадає на одну одиницю flex-grow.
  • Кожен елемент отримує кількість простору відповідно до свого значення flex-grow.

Приклад із flex-grow: 1 та flex-grow: 3

Нехай контейнер має ширину 300px, а два елементи мають ширину 100px кожен. Разом вони займають 200px, тому залишається 100px вільного простору.

Першому елементу задано flex-grow: 1, а другому — flex-grow: 3. Сума значень дорівнює 4. Отже, одна одиниця flex-grow відповідає 100px / 4 = 25px.

Перший елемент отримує додаткові 25px, а другий — 75px. У результаті перший елемент має базовий розмір 125px, а другий — 175px.


<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  width: 100px;
  flex-grow: 1;
}

.elem2 {
  width: 100px;
  flex-grow: 3;
}

Однаковий flex-grow

Якщо елементи мають однакове значення flex-grow, вільний простір розподіляється між ними порівну, незалежно від початкової ширини елементів.

Наприклад, контейнер має ширину 400px. Перший елемент має ширину 200px, другий — 100px. Разом вони займають 300px, тому залишається 100px. Якщо обом елементам задати flex-grow: 1, кожен отримає по 50px.


<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  width: 200px;
  flex-grow: 1;
}

.elem2 {
  width: 100px;
  flex-grow: 1;
}

Різні значення flex-grow

Якщо елементи мають різні значення flex-grow, вільний простір розподіляється пропорційно. Елемент зі значенням 3 отримає втричі більше вільного простору, ніж елемент зі значенням 1.

Нехай контейнер має ширину 400px. Перший елемент має ширину 200px і flex-grow: 3, а другий — ширину 100px і flex-grow: 1. Вільного простору залишається 100px. Сума значень flex-grow дорівнює 4, тому одна одиниця відповідає 25px.

Перший елемент отримує 3 × 25px = 75px і стає 275px. Другий отримує 1 × 25px = 25px і стає 125px.


.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  width: 200px;
  flex-grow: 3;
}

.elem2 {
  width: 100px;
  flex-grow: 1;
}
❗ Важливо:

Для розрахунків у цих прикладах використовуємо спрощену модель без урахування додаткових змін розміру через flex-shrink та інших факторів flex-розкладки.

Практичне завдання 1

📌 Завдання:
  1. Розгляньте код із трьома flex-елементами.
  2. Самостійно розрахуйте ширину кожного елемента після розподілу вільного простору.
  3. Після розрахунків запустіть код і перевірте результат.

<!-- Початковий код -->
<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  width: 200px;
  flex-grow: 3;
}

.elem2 {
  width: 100px;
  flex-grow: 1;
}

.elem3 {
  width: 100px;
  flex-grow: 1;
}
💡 Показати підказку

Спочатку знайдіть вільний простір: 500px - (200px + 100px + 100px). Потім додайте значення flex-grow: 3 + 1 + 1.

✅ Показати відповідь
Вільний простір: 500px - 400px = 100px. Сума flex-grow: 3 + 1 + 1 = 5. Одна одиниця flex-grow: 100px / 5 = 20px. Перший елемент: 200px + 60px = 260px. Другий: 100px + 20px = 120px. Третій: 100px + 20px = 120px.

Практичне завдання 2

📌 Завдання:
  1. Розрахуйте ширину кожного з трьох flex-елементів.
  2. Визначте кількість вільного простору.
  3. Знайдіть суму значень flex-grow.
  4. Розподіліть вільний простір між елементами.
  5. Перевірте свої розрахунки в браузері.

<!-- Початковий код -->
<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

.parent {
  display: flex;
  width: 700px;
  height: 200px;
  border: 1px solid red;
}

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  width: 100px;
  flex-grow: 1;
}

.elem2 {
  width: 100px;
  flex-grow: 2;
}

.elem3 {
  width: 200px;
  flex-grow: 3;
}
💡 Показати підказку

Спочатку обчисліть 700px - (100px + 100px + 200px), а потім поділіть отриманий вільний простір на суму 1 + 2 + 3.

✅ Показати відповідь
Вільний простір: 700px - 400px = 300px. Сума flex-grow: 1 + 2 + 3 = 6. Одна одиниця: 300px / 6 = 50px. Перший елемент: 100px + 50px = 150px. Другий: 100px + 100px = 200px. Третій: 200px + 150px = 350px.

Практичне завдання 3

📌 Завдання:
  1. Розрахуйте ширину кожного з трьох flex-елементів.
  2. Усі три елементи мають однаковий flex-grow.
  3. Визначте, скільки вільного простору отримає кожен елемент.
  4. Перевірте результат у браузері.

<!-- Початковий код -->
<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  width: 100px;
  flex-grow: 1;
}

.elem2 {
  width: 100px;
  flex-grow: 1;
}

.elem3 {
  width: 100px;
  flex-grow: 1;
}
💡 Показати підказку

Спочатку знайдіть вільні 200px. Сума flex-grow дорівнює 3, тому вільний простір потрібно поділити на 3.

✅ Показати відповідь
Вільний простір: 500px - 300px = 200px. Сума flex-grow: 1 + 1 + 1 = 3. Кожен елемент отримує 200px / 3 ≈ 66.67px. Отже, кожен елемент має приблизно 166.67px.

Практичне завдання 4

📌 Завдання:
  1. Розрахуйте ширину кожного з чотирьох flex-елементів.
  2. Знайдіть вільний простір контейнера.
  3. Обчисліть суму значень flex-grow.
  4. Визначте, скільки додаткового простору отримає кожен елемент.
  5. Перевірте свої розрахунки в браузері.

<!-- Початковий код -->
<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
  <div class="child elem4">4</div>
</div>

.parent {
  display: flex;
  width: 1000px;
  height: 200px;
  border: 1px solid red;
}

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  width: 200px;
  flex-grow: 1;
}

.elem2 {
  width: 100px;
  flex-grow: 2;
}

.elem3 {
  width: 100px;
  flex-grow: 4;
}

.elem4 {
  width: 100px;
  flex-grow: 3;
}
💡 Показати підказку

Спочатку обчисліть вільний простір: 1000px - (200px + 100px + 100px + 100px). Потім знайдіть суму flex-grow: 1 + 2 + 4 + 3.

✅ Показати відповідь
Вільний простір: 1000px - 500px = 500px. Сума flex-grow: 1 + 2 + 4 + 3 = 10. Одна одиниця: 500px / 10 = 50px. Перший елемент: 200px + 50px = 250px. Другий: 100px + 100px = 200px. Третій: 100px + 200px = 300px. Четвертий: 100px + 150px = 250px.