Урок 201 із 239
84%
← Назад

Вирівнювання flex-блоків по поперечній осі в CSS

Вивчаємо властивість align-items для вирівнювання flex-елементів по поперечній осі.

Вирівнювання flex-блоків по поперечній осі в CSS

Властивість align-items використовується для вирівнювання flex-елементів по поперечній осі.

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

Значення flex-start притискає елементи до початку поперечної осі, а flex-end — до кінця поперечної осі.

.parent {
  display: flex;
  flex-direction: row;

  justify-content: flex-start;
  align-items: flex-start;
}

У цьому випадку елементи знаходяться на початку обох осей: зліва та зверху.

.parent {
  display: flex;
  flex-direction: row;

  justify-content: flex-start;
  align-items: flex-end;
}
.parent {
  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  align-items: flex-start;
}

При column значення align-items: flex-start притискає елементи до початку поперечної осі — лівого краю.

.parent {
  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  align-items: flex-end;
}
.parent {
  display: flex;
  flex-direction: column;

  justify-content: flex-end;
  align-items: flex-end;
}
.parent {
  display: flex;
  flex-direction: column-reverse;

  justify-content: flex-start;
  align-items: flex-start;
}
❗ Важливо:

Важливо: напрямок поперечної осі залежить від того, горизонтальна чи вертикальна головна вісь. При row вона йде зверху вниз, а при column — зліва направо.

  • justify-content — вирівнювання по головній осі.
  • align-items — вирівнювання по поперечній осі.
  • flex-start — початок осі.
  • flex-end — кінець осі.
  • row → головна вісь горизонтальна, поперечна вертикальна.
  • column → головна вісь вертикальна, поперечна горизонтальна.
📌 Завдання:
  1. №1. Створіть flex-контейнер із трьома блоками.
  2. №2. Перевірте align-items: flex-start.
  3. №3. Перевірте align-items: flex-end.
  4. №4. Змініть flex-direction з row на column.
  5. №5. Спробуйте одночасно змінювати justify-content та align-items.
💡 Показати підказку

Спочатку визначте напрямок головної осі через flex-direction. Після цього стане зрозуміло, куди працює align-items.

✅ Показати відповідь
.parent {
  display: flex;
  flex-direction: row;

  justify-content: flex-start;
  align-items: flex-end;
}