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

Регулювання стискання flex-елементів

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

Що робить flex-shrink

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

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

Зважена ширина

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


        зважена ширина = базова ширина × flex-shrink
200px × 3 = 600px

Формула стискання

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

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

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

Нехай перший елемент має ширину 400px і flex-shrink: 2. Три інші елементи мають ширину 200px і flex-shrink: 1. Ширина контейнера — 900px.


400px + 3 × 200px = 1000px
1000px − 900px = 100px

Отже, від'ємний вільний простір становить 100px.

Знаходимо зважені ширини


400px × 2 = 800px
200px × 1 = 200px
200px × 1 = 200px
200px × 1 = 200px

Сумарна зважена ширина становить:


800px + 200px + 200px + 200px = 1400px

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

Перший елемент має зважену ширину 800px. Його частка стискання становить:


100px × (800px / 1400px) = 57,14px

Тому після стискання його ширина буде приблизно 342,86px.


400px − 57,14px = 342,86px ≈ 343px

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

Кожен із трьох інших елементів має зважену ширину 200px. Тому кожен із них втратить:


100px × (200px / 1400px) = 14,29px

Підсумкова ширина кожного з них становитиме приблизно 185,71px.


200px − 14,29px = 185,71px ≈ 186px
❗ Важливо:

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

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

📌 Завдання:
  1. Створіть flex-контейнер шириною 900px.
  2. Додайте чотири елементи.
  3. Першому елементу задайте width: 400px і flex-shrink: 2.
  4. Іншим трьом елементам задайте width: 200px і flex-shrink: 1.
  5. До запуску коду розрахуйте підсумкову ширину кожного елемента.
  6. Перевірте результат за допомогою 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>
💡 Показати підказку

Знайдіть від'ємний вільний простір, потім зважені ширини та їхню суму. Для першого елемента використайте flex-shrink: 2, для інших — flex-shrink: 1.

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

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

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

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

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

Сумарна ширина — 300px, контейнер — 200px, тому від'ємний вільний простір становить 100px. Зважені ширини дорівнюють 200px, 100px і 100px.

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

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

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

📌 Завдання:
  1. Створіть контейнер шириною 200px.
  2. Додайте три елементи шириною по 100px.
  3. Для першого встановіть flex-shrink: 3.
  4. Для другого встановіть flex-shrink: 2.
  5. Для третього встановіть flex-shrink: 1.
  6. Розрахуйте підсумкову ширину кожного елемента.
  7. Перевірте свої розрахунки вимірюванням.
<!-- Початковий код --> <div class="parent"> <div class="child elem1">1</div> <div class="child elem2">2</div> <div class="child elem3">3</div> </div>
💡 Показати підказку

Від'ємний вільний простір — 100px. Зважені ширини: 300px, 200px і 100px. Сумарна зважена ширина — 600px.

✅ Показати відповідь
.parent { display: flex; width: 200px; } .child { height: 50px; border: 1px solid green; } .elem1 { width: 100px; flex-shrink: 3; } .elem2 { width: 100px; flex-shrink: 2; } .elem3 { width: 100px; flex-shrink: 1; }

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

📌 Завдання:
  1. Створіть контейнер шириною 500px.
  2. Першому елементу задайте width: 300px і flex-shrink: 3.
  3. Другому елементу задайте width: 200px і flex-shrink: 2.
  4. Третьому та четвертому елементам задайте width: 200px і flex-shrink: 1.
  5. Розрахуйте від'ємний вільний простір.
  6. Знайдіть зважену ширину кожного елемента.
  7. Розрахуйте підсумкові ширини всіх чотирьох елементів.
  8. Перевірте результат у 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>
💡 Показати підказку

Сумарна базова ширина — 900px, тому від'ємний вільний простір — 400px. Зважені ширини: 900px, 400px, 200px і 200px. Їхня сума — 1700px.

✅ Показати відповідь
.parent { display: flex; width: 500px; } .child { height: 50px; border: 1px solid green; } .elem1 { width: 300px; flex-shrink: 3; } .elem2 { width: 200px; flex-shrink: 2; } .elem3 { width: 200px; flex-shrink: 1; } .elem4 { width: 200px; flex-shrink: 1; }
❗ Важливо:

Під час перевірки в браузері можливі невеликі відмінності від ручного розрахунку через піксельне округлення та інші особливості алгоритму Flexbox. Для навчальних прикладів наведені розрахунки показують основний принцип роботи flex-shrink.