Урок 90 із 104
87%
← Назад

Стискання flex-елементів при нестачі місця

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

Що відбувається, коли елементам не вистачає місця

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


<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

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

Додаємо більше елементів

Тепер додамо ще один елемент шириною 100px. Загальна задана ширина становитиме 400px, але контейнер має лише 300px.


<div class="parent">
   <div class="child">1</div>
   <div class="child">2</div>
   <div class="child">3</div>
   <div class="child">4</div>
</div>

Властивість flex-shrink

За стискання flex-елементів відповідає властивість flex-shrink. Її значення визначає, наскільки елемент може стискатися, коли для всіх елементів недостатньо місця.


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

Значення flex-shrink: 1 є значенням за замовчуванням. Тому flex-елементи можуть стискатися, навіть якщо їм явно задано width.

❗ Важливо:

Не плутайте width із гарантованою шириною flex-елемента. Усередині flex-контейнера width бере участь у формуванні базового розміру, але flexbox може змінити підсумковий розмір елемента через flex-shrink.

Як заборонити стискання

Якщо потрібно, щоб елемент не стискався, можна встановити flex-shrink: 0.


.child {
  width: 100px;
  flex-shrink: 0;
}

У такому випадку елемент намагатиметься зберегти свій базовий розмір. Якщо місця в контейнері недостатньо, елементи можуть вийти за межі контейнера.

Різне значення flex-shrink

Для різних елементів можна встановити різні значення flex-shrink. Елементи з більшим значенням мають більшу частку негативного вільного простору, але фактичне стискання залежить також від їхніх базових розмірів та інших обмежень.


.elem1 {
  flex-shrink: 1;
}

.elem2 {
  flex-shrink: 2;
}
  
.elem3 {
  flex-shrink: 1;
}
❗ Важливо:

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

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

📌 Завдання:
  1. Створіть flex-контейнер шириною 300px.
  2. Додайте чотири елементи шириною 100px.
  3. Подивіться, як flex-елементи стискаються, щоб поміститися в контейнер.
  4. Потім встановіть для всіх елементів flex-shrink: 0.
  5. Порівняйте результат.

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

Спочатку нічого не змінюйте у flex-shrink. Потім додайте .child { flex-shrink: 0; } і подивіться, що станеться.

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

.parent {
  display: flex; width: 300px;
}
  
.child {
  width: 100px;
  height: 50px;
  border: 1px solid green;
  flex-shrink: 0;
}

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

📌 Завдання:
  1. Створіть контейнер шириною 300px.
  2. Додайте три елементи шириною 150px.
  3. Першому елементу залиште flex-shrink: 1.
  4. Другому елементу задайте flex-shrink: 2.
  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>
💡 Показати підказку

Використайте flex-shrink: 1 для першого і третього елементів та flex-shrink: 2 для другого.

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

.parent {
  display: flex; width: 300px;
}
  
.child {
  width: 150px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex-shrink: 1;
}
  
.elem2 {
  flex-shrink: 2;
}
  
.elem3 {
  flex-shrink: 1;
}