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

Рядково-блочний батьківський елемент flex у CSS

Вивчаємо значення inline-flex, яке створює flex-контейнер із поведінкою рядково-блочного елемента.

Рядково-блочний батьківський елемент flex у CSS

Для створення flex-контейнера можна використовувати не тільки display: flex, а й display: inline-flex.

Значення inline-flex створює flex-контейнер, який поводиться як рядково-блочний елемент.

Такий елемент може розташовуватися в одному рядку з іншими елементами та підтримує властивості flex-контейнера.

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

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

Різниця між flex і inline-flex полягає в поведінці самого контейнера. Його дочірні елементи в обох випадках залишаються flex-елементами.

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

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

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

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