Урок 92 із 104
88%
← Назад

Вплив різної ширини flex-елементів на стискання

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

Елементи з різною шириною

Уявімо п'ять flex-елементів. Чотири з них мають ширину 100px, а другий елемент — 150px. Загальна базова ширина всіх елементів становить 550px.


<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 {
  width: 100px;
  height: 50px;
  border: 1px solid green;
}
  
.elem2 {
  width: 150px;
}

Що відбувається при нестачі місця

Коли ширина контейнера стає меншою за 550px, усім елементам уже не вистачає місця. Оскільки flex-shrink: 1 встановлено за замовчуванням, flexbox починає стискати елементи.

Важливо, що стискання залежить не лише від значення flex-shrink, а й від базового розміру елемента. Якщо значення flex-shrink однакове, більший елемент бере на себе більшу частину зменшення.


.child {
   width: 100px;
   flex-shrink: 1;
}
   
.elem2 {
  width: 150px;
  flex-shrink: 1;
}

Чому більший елемент стискається сильніше

При однаковому flex-shrink більший базовий розмір означає більшу частку негативного вільного простору. Тому елемент шириною 150px може втратити більше пікселів, ніж елемент шириною 100px.

❗ Важливо:

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

При дуже сильному стисканні

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

❗ Важливо:

Не варто сприймати правило про збереження співвідношення 1,5:1 як абсолютне. У реальному flexbox результат залежить від базових розмірів, flex-shrink, min-width, max-width, вмісту та інших властивостей.

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

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

    <!-- Початковий код -->
<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 width: 100px, а для .elem2 перевизначте ширину: 150px. Не вимикайте flex-shrink.

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

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

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

📌 Завдання:
  1. Створіть flex-контейнер шириною 400px.
  2. Додайте три flex-елементи.
  3. Першому та третьому елементам задайте width: 100px.
  4. Другому елементу задайте width: 200px.
  5. Задайте всім елементам flex-shrink: 1.
  6. Поступово зменшуйте ширину контейнера та спостерігайте за стисканням.

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

Задайте ширини 100px, 200px і 100px. Для всіх елементів використайте flex-shrink: 1.

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

.parent {
  display: flex;
  width: 400px;
}
  
.child {
  height: 50px;
  border: 1px solid green;
  flex-shrink: 1;
}
  
.elem1 {
  width: 100px;
}
  
.elem2 {
  width: 200px;
}
  
.elem3 {
  width: 100px;
}