Нульова жадібність flex-елементів

Розглядаємо значення flex-grow: 0, яке не дозволяє flex-елементу брати участь у розподілі вільного простору контейнера.

Що означає flex-grow: 0

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

Значення flex-grow за замовчуванням дорівнює 0. Тому flex-елементи без явно заданого flex-grow не збільшуються за рахунок вільного простору контейнера.

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

Приклад із flex-grow: 0, 2 та 3

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

Перший елемент має flex-grow: 0, другий — flex-grow: 2, а третій — flex-grow: 3. Перший елемент не бере участі в розподілі, тому для розрахунку враховуються тільки значення 2 і 3.

Сума значень flex-grow елементів, які беруть участь у розподілі, дорівнює 5. Одна одиниця flex-grow отримує 200px / 5 = 40px.

Перший елемент: 100px + 0 × 40px = 100px.
Другий елемент: 100px + 2 × 40px = 180px.
Третій елемент: 100px + 3 × 40px = 220px.


<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: 0;
}

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

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

flex-grow: 0 не означає, що елемент стає невидимим

Значення flex-grow: 0 не змінює базовий розмір елемента на нуль і не приховує його. Воно лише означає, що елемент не отримує додатковий простір під час розподілу вільного простору.

❗ Важливо:

Запам'ятайте: flex-grow: 0 означає «не збільшувати цей елемент за рахунок вільного простору». Це значення встановлене для flex-grow за замовчуванням.

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

📌 Завдання:

Розрахуйте ширину кожного flex-елемента.
Визначте вільний простір контейнера.
Не враховуйте перший елемент під час розподілу, оскільки його flex-grow дорівнює 0.
Розподіліть вільний простір між другим і третім елементами.
Перевірте свої розрахунки в браузері.


<!-- Початковий код -->
<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: 0;
}

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

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

💡 Показати підказку

Вільний простір дорівнює 500px - (200px + 100px + 100px). Перший елемент не бере участі в розподілі. Вільний простір потрібно поділити між двома елементами з flex-grow: 1.

✅ Показати відповідь

Вільний простір: 500px - 400px = 100px. Сума flex-grow для елементів, які беруть участь у розподілі: 1 + 1 = 2. Кожен отримує по 50px. Перший елемент: 200px. Другий: 100px + 50px = 150px. Третій: 100px + 50px = 150px.

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

📌 Завдання:

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


<!-- Початковий код -->
<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: 900px;
  height: 200px;
  border: 1px solid red;
}

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

.elem1 {
  width: 300px;
  flex-grow: 0;
}

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

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

💡 Показати підказку

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

✅ Показати відповідь

Вільний простір: 900px - 600px = 300px. Сума flex-grow: 3 + 2 = 5. Одна одиниця: 300px / 5 = 60px. Перший елемент: 300px. Другий: 200px + 3 × 60px = 380px. Третій: 100px + 2 × 60px = 220px.

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

📌 Завдання:

Розрахуйте ширину кожного з чотирьох flex-елементів.
Визначте, які елементи беруть участь у розподілі вільного простору.
Знайдіть вільний простір контейнера.
Розподіліть його між елементами з flex-grow більше 0.
Перевірте свої розрахунки в браузері.


<!-- Початковий код -->
<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: 700px;
  height: 200px;
  border: 1px solid red;
}

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

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

.elem2 {
  width: 200px;
  flex-grow: 0;
}

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

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

💡 Показати підказку

Перший і другий елементи не беруть участі в розподілі. Спочатку знайдіть вільний простір: 700px - (200px + 200px + 100px + 100px). Потім поділіть його між третім і четвертим елементами.

✅ Показати відповідь

Вільний простір: 700px - 600px = 100px. У розподілі беруть участь тільки третій і четвертий елементи. Сума flex-grow: 1 + 1 = 2. Кожен отримує по 50px. Перший елемент: 200px. Другий: 200px. Третій: 100px + 50px = 150px. Четвертий: 100px + 50px = 150px.