Урок 160 із 239
67%
← Назад

Ширина батьківського елемента flex у CSS

Вивчаємо, як визначається ширина flex-контейнера, якщо йому не задано власну ширину.

Ширина батьківського елемента flex у CSS

Якщо flex-контейнеру не задати ширину, він займе весь доступний простір по ширині.

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

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
.parent {
  display: flex;
  border: 1px solid red;
}

.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
❗ Важливо:

Flex-контейнер за замовчуванням є блочним елементом, тому без заданої ширини він займає всю ширину батьківського блока.

  • display: flex створює flex-контейнер.
  • Без width батьківський елемент займає всю доступну ширину.
  • Дочірні елементи розташовуються в ряд.
  • Ширина дочірніх елементів залежить від їх власних властивостей.
📌 Завдання:
  1. №1. Створіть flex-контейнер без заданої ширини.
  2. №2. Додайте три дочірні блоки.
  3. №3. Змініть ширину дочірніх елементів і перевірте, як вони розташовуються всередині контейнера.
💡 Показати підказку

Спробуйте додати width: 300px батьківському елементу і порівняйте результат.

✅ Показати відповідь
.parent {
  display: flex;
  border: 1px solid red;
}

.child {
  width: 50px;
  height: 50px;
}