Урок 88 із 104
85%
← Назад

Жадібність без заданої ширини flex-елементів

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

Ширина flex-елемента без width

Якщо flex-елементу не задано width, його початковий розмір уздовж головної осі визначається його вмістом. Наприклад, елемент із довшим текстом займатиме більше місця, ніж елемент із коротким текстом.


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

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

.child {
  height: 50px;
  border: 1px solid green;
}

flex-grow без заданої ширини

Якщо для таких елементів задати flex-grow, вільний простір контейнера почне розподілятися між ними пропорційно до значень flex-grow.

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


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

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

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  flex-grow: 1;
}

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

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

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

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

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

Не задавайте width для .child. Спочатку подивіться на початкові розміри, а потім додайте flex-grow: 1 до обох елементів.

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

.parent {
  display: flex;
  width: 400px;
}

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  flex-grow: 1;
}

.elem2 {
  flex-grow: 1;
}

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

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

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

Не задавайте width. Використайте flex-grow: 1 для першого елемента та flex-grow: 3 для другого.

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

.parent {
  display: flex;
  width: 400px;
}

.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  flex-grow: 1;
}

.elem2 {
  flex-grow: 3;
}