Вирівнювання flex-елементів по центру в CSS

Вивчаємо властивість justify-content та значення center для вирівнювання flex-елементів по горизонталі.

Вирівнювання flex-елементів по центру в CSS

Для вирівнювання flex-елементів усередині контейнера використовується властивість justify-content.

Значення center розташовує всі flex-елементи по центру батьківського контейнера.

.parent {
  display: flex;
  justify-content: center;
}

❗ Важливо:

За замовчуванням flex-елементи розташовані зліва. Властивість justify-content змінює їх положення по головній осі.

justify-content керує розташуванням flex-елементів по головній осі.
center — розташовує елементи по центру.
За замовчуванням використовується значення flex-start.
Для вертикального розташування потрібно змінити напрямок flex через flex-direction.

.parent {
  display: flex;
  width: 300px;
  height: 100px;
  justify-content: center;
  border: 1px solid red;
}

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

📌 Завдання:

№1. Створіть flex-контейнер із трьома дочірніми блоками.
№2. Додайте батьківському елементу justify-content: center.
№3. Перевірте, як зміниться положення елементів.

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

Спробуйте змінити center на flex-start і flex-end, щоб побачити різницю.

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

.parent {
  display: flex;
  justify-content: center;
}