Практика на вирівнювання по осях у CSS

Практикуємо вирівнювання flex-елементів по головній та поперечній осях за допомогою justify-content та align-items.

Практика на вирівнювання по осях у CSS

У flex-контейнерах є дві осі: головна та поперечна. Властивість justify-content відповідає за вирівнювання по головній осі, а align-items — по поперечній.

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

.parent {
  display: flex;
  width: 400px;
  height: 300px;
  border: 2px solid red;
}

.child {
  width: 60px;
  height: 60px;
  border: 2px solid green;
}

Вирівнювання по головній осі

За горизонтального напрямку row головна вісь іде зліва направо. За неї відповідає justify-content.

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

flex-start — елементи на початку осі.
flex-end — елементи в кінці осі.
center — елементи по центру.
space-between — однакові проміжки між елементами.
space-evenly — однакові проміжки між елементами та краями.

Вирівнювання по поперечній осі

Для вирівнювання по другій осі використовується властивість align-items.

.parent {
  display: flex;
  align-items: center;
}

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

❗ Важливо:

Пам'ятайте: justify-content працює по головній осі, а align-items — по поперечній. Напрямок осей змінює властивість flex-direction.

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

📌 Завдання:

№1. Створіть flex-контейнер із трьома блоками.
№2. Вирівняйте блоки по центру за допомогою justify-content.
№3. Вирівняйте блоки по вертикалі за допомогою align-items.
№4. Змініть flex-direction на column та перевірте, як зміняться осі.

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

Якщо елементи не стають у потрібне місце — спочатку визначте напрямок головної осі через flex-direction.

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

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