Фактор стискання flex-елементів

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

Що таке від'ємний вільний простір

Коли сумарний базовий розмір flex-елементів більший за доступний простір контейнера, виникає від'ємний вільний простір. Flexbox має зменшити розміри елементів, щоб вони могли поміститися в контейнер.

Від'ємний вільний простір можна знайти як різницю між сумарною шириною flex-елементів і шириною контейнера.

Простий розрахунок

Нехай є чотири елементи шириною по 200px, а ширина контейнера становить 700px.


200px × 4 = 800px
800px − 700px = 100px

Сумарна ширина елементів на 100px більша за ширину контейнера. Отже, потрібно розподілити 100px стискання між елементами.

100px ÷ 4 = 25px

Якщо всі елементи мають однаковий базовий розмір і однаковий flex-shrink, у цьому спрощеному прикладі кожен елемент втратить по 25px.

200px − 25px = 175px

Роль flex-shrink

За можливість стискання відповідає властивість flex-shrink. Її значення за замовчуванням дорівнює 1.


.child {
  width: 200px;
  flex-shrink: 1;
}

Якщо для всіх елементів flex-shrink однаковий, то при однакових базових розмірах їхнє стискання буде однаковим.

❗ Важливо:

У реальному алгоритмі Flexbox стискання розподіляється не просто порівну. Враховується добуток flex-shrink на базовий розмір елемента. Тому елементи різного базового розміру можуть стискатися на різну кількість пікселів.

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

📌 Завдання:

Створіть flex-контейнер шириною 700px.
Додайте чотири flex-елементи.
Задайте кожному елементу width: 200px.
Задайте однакову висоту та межу для наочності.
Перед перевіркою розрахуйте очікувану ширину кожного елемента.
Перевірте ширину елементів за допомогою DevTools браузера.


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

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

Спочатку знайдіть сумарну ширину чотирьох елементів, потім визначте від'ємний вільний простір і поділіть його між елементами.

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


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

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

📌 Завдання:

Створіть flex-контейнер шириною 200px.
Додайте три елементи.
Кожному елементу задайте width: 100px.
Не змінюйте значення flex-shrink.
До запуску коду розрахуйте, якою приблизно буде ширина кожного елемента.
Перевірте свій розрахунок за допомогою DevTools.


        <!-- Початковий код -->
<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: 200px;
  height: 200px;
  border: 1px solid red;
}
  
.child {
  height: 50px;
  border: 1px solid green;
}
  
.elem1 {
  width: 100px;
}
  
.elem2 {
  width: 100px;
}
  
.elem3 {
  width: 100px;
}