Скасування стискання flex-елементів

Вивчаємо властивість flex-shrink: значення 1 за замовчуванням, скасування стискання за допомогою 0 та використання дробових значень для керування стисканням.

Значення flex-shrink за замовчуванням

Для flex-елементів властивість flex-shrink за замовчуванням має значення 1. Це означає, що елемент може стискатися, якщо всім елементам не вистачає місця в контейнері.

.container { display: flex; width: 300px; } .item { width: 150px; }

Як скасувати стискання

Щоб заборонити flex-елементу стискатися, встановіть flex-shrink: 0. Такий елемент збереже свій базовий розмір, навіть якщо для всіх елементів не вистачає місця.

.item { width: 150px; flex-shrink: 0; }

flex-shrink: 1 — елемент може стискатися; це значення використовується за замовчуванням.
flex-shrink: 0 — елемент не стискається.
flex-shrink: 0.5 — елемент стискається, але його фактор стискання менший, ніж у елемента з flex-shrink: 1.
flex-shrink: 1.5 — фактор стискання більший, ніж у елемента з flex-shrink: 1.

Дробові значення

Властивість flex-shrink може мати не лише цілі, а й дробові невід'ємні значення. Вони використовуються як фактор стискання. При однакових базових розмірах елемент із більшим значенням flex-shrink отримає більшу частку стискання.

.item:nth-child(1) { flex-shrink: 1; } .item:nth-child(2) { flex-shrink: 0.5; } .item:nth-child(3) { flex-shrink: 2; }

❗ Важливо:

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

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

📌 Завдання:

Створіть flex-контейнер шириною 300px.
Додайте три елементи шириною 150px.
Для другого елемента встановіть flex-shrink: 0.
Перевірте, як зміниться його поведінка порівняно з іншими елементами.

<!-- Початковий код --> <div class="container"> <div class="item">1</div> <div class="item item--no-shrink">2</div> <div class="item">3</div> </div>

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

Для другого елемента використайте flex-shrink: 0.

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

.container { display: flex; width: 300px; } .item { width: 150px; flex-shrink: 1; } .item--no-shrink { flex-shrink: 0; }

📌 Завдання:

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

<!-- Початковий код --> <div class="container"> <div class="item item--one">1</div> <div class="item item--two">2</div> <div class="item item--three">3</div> </div>

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

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

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

.container { display: flex; width: 300px; } .item { width: 150px; } .item--one { flex-shrink: 1; } .item--two { flex-shrink: 0.5; } .item--three { flex-shrink: 2; }