Різна ширина елементів і їхнє стискання

Розглядаємо, як Flexbox розподіляє від'ємний вільний простір між елементами з різними базовими розмірами.

Чому елементи стискаються по-різному

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

У спрощеному випадку, коли всі елементи мають однаковий flex-shrink, частину від'ємного вільного простору для конкретного елемента можна розрахувати за формулою:


        частка стискання = від'ємний вільний простір × (базовий розмір елемента / сумарний базовий розмір)

Приклад із чотирма елементами

Нехай є чотири елементи. Перший має ширину 400px, а три інші — по 200px. Ширина контейнера становить 900px.


        400px + 200px + 200px + 200px = 1000px

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

1000px − 900px = 100px

Стискання першого елемента

Перший елемент має найбільшу базову ширину — 400px. Тому він отримує більшу частку від'ємного вільного простору:


        100px × (400px / 1000px) = 40px

Отже, від першого елемента віднімається 40px:

400px − 40px = 360px

Стискання інших елементів

Кожен із трьох інших елементів має базову ширину 200px. Його частка стискання становить:


        100px × (200px / 1000px) = 20px

Тому ширина кожного з цих елементів після стискання становитиме:


        200px − 20px = 180px

❗ Важливо:

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

Перевірка результату


<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: 900px;
  height: 200px;
  border: 1px solid red;
}
  
.child {
  height: 50px;
  border: 1px solid green;
}
  
.elem1 {
  width: 400px;
}
.elem2,
.elem3,
.elem4 {
  width: 200px;
}

Відкрийте DevTools браузера та перевірте фактичну ширину кожного елемента. За наведених умов очікуваний результат — приблизно 360px, 180px, 180px і 180px.

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

📌 Завдання:

Реалізуйте приклад із чотирма елементами.
Задайте першому елементу width: 400px.
Іншим трьом елементам задайте width: 200px.
Задайте контейнеру width: 900px.
До перевірки розрахуйте очікувану ширину всіх елементів.
Перевірте результат за допомогою DevTools.


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

.elem1 {
  width: 400px;
}
  
.elem2,
.elem3,
.elem4 {
  width: 200px;
}

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

📌 Завдання:

Розрахуйте підсумкові ширини трьох елементів.
Контейнер має ширину 300px.
Перший елемент має width: 300px.
Другий і третій елементи мають width: 100px.
Визначте сумарну базову ширину.
Знайдіть від'ємний вільний простір.
Розрахуйте, скільки пікселів втратить кожен елемент.
Перевірте свої розрахунки в браузері.


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

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

Сумарна базова ширина — 500px, а контейнер має 300px. Спочатку знайдіть 200px від'ємного вільного простору, а потім розподіліть його пропорційно ширинам 300px, 100px і 100px.

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


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

.child {
  height: 50px;
  border: 1px solid green;
}
  
.elem1 {
  width: 300px;
}
  
.elem2 {
  width: 100px;
}
  
.elem3 {
  width: 100px;
}