Флекс-елементи в CSS

Вивчаємо нову модель розташування елементів — flex, яка дозволяє легко створювати рядкові макети.

Флекс-елементи в CSS

Окрім блочних, рядкових і рядково-блочних елементів у CSS існує ще одна модель — flex-елементи.

Щоб зробити дочірні елементи flex-елементами, потрібно батьківському елементу задати display: flex.

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

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

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

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

❗ Важливо:

За замовчуванням flex-елементи розташовуються горизонтально зліва направо.

display: flex задається батьківському елементу.
Дочірні елементи автоматично стають flex-елементами.
Flex-елементи підтримують width, height, margin і padding.
За замовчуванням елементи розташовуються в один ряд.

📌 Завдання:

№1. Створіть батьківський div із трьома дочірніми блоками.
№2. Додайте батьківському елементу display: flex.
№3. Задайте дочірнім елементам ширину та висоту.
№4. Перевірте, як зміниться розташування блоків.

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

Спробуйте прибрати display: flex і порівняйте результат. Ви побачите, що звичайні блоки розташовуються один під одним.

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

.parent {
  display: flex;
}

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