Вплив ширини батьківського контейнера на стискання flex-елементів

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

Flex-контейнер із шириною у відсотках

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


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


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

Що відбувається при зменшенні вікна

Зменшимо ширину вікна браузера. Оскільки контейнер має width: 100%, його ширина також зменшиться. Коли вона стане меншою за 500px, п'ять елементів по 100px вже не зможуть поміститися без зміни їхнього розміру.

У спрощеному випадку, коли всі п'ять елементів мають однаковий базовий розмір і однаковий flex-shrink: 1, нестача простору розподіляється між ними, тому їхня підсумкова ширина буде меншою за 100px.


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

❗ Важливо:

flex-shrink має значення 1 за замовчуванням. Тому flex-елементи можуть автоматично стискатися, коли їхні базові розміри не поміщаються в контейнер.

Забороняємо стискання

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


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

❗ Важливо:

Якщо потрібно, щоб елементи переносилися на новий рядок замість стискання або виходу за межі контейнера, можна використовувати flex-wrap: wrap.

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

📌 Завдання:

Створіть flex-контейнер шириною 100%.
Додайте п'ять елементів.
Задайте кожному елементу width: 100px.
Зменшуйте ширину вікна браузера.
Спостерігайте, як елементи поступово стискаються, коли контейнер стає вужчим за 500px.


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

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

Задайте контейнеру width: 100%, а кожному елементу width: 100px. Не вимикайте flex-shrink.

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


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

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

📌 Завдання:

Використайте ті самі п'ять елементів шириною 100px.
Задайте контейнеру width: 100%.
Забороніть стискання елементів за допомогою flex-shrink: 0.
Зменшіть ширину вікна браузера менше ніж до 500px.
Порівняйте результат із попереднім завданням.


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

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

Додайте flex-shrink: 0 до .child і порівняйте поведінку елементів при вузькому контейнері.

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


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