Урок 93 із 104
89%
← Назад

Вплив flex-grow на стискання flex-елементів

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

flex-grow замість width

Розглянемо п'ять flex-елементів без заданої width. Замість ширини використаємо flex-grow: 1 для більшості елементів, а другому елементу задамо flex-grow: 3.


<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 class="child elem5">5</div>
</div>

.parent {
  display: flex;
  width: 100%;
  border: 1px solid red;
}
  
.child {
  height: 50px;
  border: 1px solid green;
  flex-grow: 1;
}
  
.elem2 {
  flex-grow: 3;
}

Як працює flex-grow

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

❗ Важливо:

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

Що відбувається при сильному стисканні

Коли ширина контейнера зменшується, вільного простору стає все менше. У певний момент його вже недостатньо, і flexbox переходить до стискання елементів відповідно до flex-shrink.


.child {
  flex-grow: 1;
  flex-shrink: 1;
}
  
.elem2 {
  flex-grow: 3;
}

За замовчуванням flex-shrink дорівнює 1. Тому, коли елементам не вистачає місця, вони можуть стискатися. Саме в цей момент співвідношення, сформоване flex-grow, перестає визначати підсумкові розміри.

Grow і shrink працюють у різних ситуаціях

  • flex-grow використовується для розподілу додаткового простору.
  • flex-shrink використовується для розподілу нестачі простору.
  • flex-grow: 3 не означає, що елемент завжди буде втричі ширшим.
  • При сильному стисканні результат може суттєво відрізнятися від початкового співвідношення.
❗ Важливо:

Зручно запам'ятати: grow відповідає на запитання «кому дати більше вільного місця?», а shrink — «як зменшити елементи, коли місця недостатньо?».

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

📌 Завдання:
  1. Створіть flex-контейнер шириною 100%.
  2. Додайте п'ять flex-елементів.
  3. Не задавайте елементам width.
  4. Для всіх елементів встановіть flex-grow: 1.
  5. Другому елементу встановіть flex-grow: 3.
  6. Розширюйте та звужуйте вікно браузера.
  7. Спостерігайте, як змінюється співвідношення розмірів елементів.

        <!-- Початковий код -->
<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 class="child elem5">5</div>
</div>
💡 Показати підказку

Для всіх .child використайте flex-grow: 1, а для .elem2 перевизначте його значення на 3. Не задавайте width.

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

.parent {
  display: flex;
  width: 100%;
}
  
.child {
  height: 50px;
  border: 1px solid green;
  flex-grow: 1;
}
  
.elem2 {
  flex-grow: 3;
}

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

📌 Завдання:
  1. Створіть flex-контейнер шириною 100%.
  2. Додайте три flex-елементи без заданої width.
  3. Першому та третьому елементам встановіть flex-grow: 1.
  4. Другому елементу встановіть flex-grow: 4.
  5. Змінюйте ширину вікна браузера.
  6. Зверніть увагу, що при достатній ширині другий елемент отримує більшу частину вільного простору, але при сильному стисканні співвідношення може змінюватися.

        <!-- Початковий код -->
<div class="parent">
  <div class="child elem1">Перший</div>
  <div class="child elem2">Другий</div>
  <div class="child elem3">Третій</div>
</div>
💡 Показати підказку

Не задавайте width. Використайте flex-grow: 1 для першого й третього елементів та flex-grow: 4 для другого.

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

.parent {
  display: flex;
  width: 100%;
}
  
.child {
  height: 50px;
  border: 1px solid green;
  flex-grow: 1;
}
  
.elem2 {
  flex-grow: 4;
}