Урок 89 із 104
86%
← Назад

Жадібність flex-елемента при заданій ширині

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

flex-grow та елементи із заданою шириною

Якщо кільком flex-елементам задати фіксовану ширину, а одному з них встановити flex-grow: 1 без заданої width, цей елемент отримає весь вільний простір, який залишиться в контейнері.


<div class="parent">
 <div class="child elem1"></div>
 <div class="child elem2"></div>
 <div class="child elem3"></div>
</div>

.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}

.child {
  height: 50px; border: 1px solid green;
}
  
.elem1 {
  width: 100px;
}
.elem2 {
  flex-grow: 1;
}
  
.elem3 {
width: 100px;
}

У спрощеному прикладі вільний простір становить 200px: 400px − 100px − 100px. Саме цей простір отримує елемент із flex-grow: 1.

❗ Важливо:

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

Плаваюча ширина при зміні контейнера

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


.parent {
  display: flex;
  width: 80%;
  border: 1px solid red;
}
  
.elem1 {
  width: 100px;
}
  
.elem2 {
  flex-grow: 1;
}
  
.elem3 {
  width: 100px;
}
❗ Важливо:

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

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

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

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

Задайте першому та третьому елементам width: 100px, а другому — flex-grow: 1.

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

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

📌 Завдання:
  1. Задайте батьківському контейнеру ширину 80%.
  2. Створіть три flex-елементи.
  3. Першому та третьому елементам задайте width: 120px.
  4. Другому елементу задайте flex-grow: 1.
  5. Змінюйте ширину вікна браузера та спостерігайте за поведінкою елементів.

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

Для контейнера використайте width: 80%. Фіксовану ширину задайте першому та третьому елементам, а для другого використайте flex-grow: 1.

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

.parent {
  display: flex;
  width: 80%;
}
  
.child {
  height: 50px;
  border: 1px solid green;
}
  
.elem1 {
  width: 120px;
}
  
.elem2 {
  flex-grow: 1;
}
  
.elem3 {
  width: 120px;
}