Урок 199 із 239
83%
← Назад

Головна та поперечна осі у flex-блоках у CSS

Вивчаємо головну та поперечну осі у Flexbox, напрямки осей та залежність від властивості flex-direction.

Головна та поперечна осі у flex-блоках у CSS

Під час роботи з Flexbox використовуються два важливі поняття: головна вісь (main axis) та поперечна вісь (cross axis). Розуміння цих осей необхідне для правильного вирівнювання flex-елементів.

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

Поперечна вісь завжди розташована перпендикулярно до головної осі.

  • row — головна вісь направлена зліва направо.
  • row-reverse — головна вісь направлена справа наліво.
  • column — головна вісь направлена зверху вниз.
  • column-reverse — головна вісь направлена знизу вверх.
.parent {
  display: flex;
  flex-direction: row;
}

При значенні row елементи розташовуються в ряд. Головна вісь йде горизонтально зліва направо, а поперечна — вертикально зверху вниз.

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

При значенні column головна вісь стає вертикальною. Елементи розташовуються зверху вниз, а поперечна вісь направлена зліва направо.

❗ Важливо:

Поперечна вісь не може бути направлена справа наліво або знизу вверх. Її напрямок залежить від головної осі.

📌 Завдання:
  1. №1. Якщо головна вісь горизонтальна, куди направлена поперечна вісь?
  2. №2. Якщо головна вісь вертикальна, куди направлена поперечна вісь?
  3. №3. Куди може бути направлена головна вісь, якщо поперечна направлена вправо?
  4. №4. Чи може поперечна вісь бути направлена справа наліво?
  5. №5. Чи може поперечна вісь бути направлена знизу вверх?
  6. №6. Визначте напрямки осей для flex-direction: row.
  7. №7. Визначте напрямки осей для flex-direction: column.
  8. №8. Визначте напрямки осей для flex-direction: row-reverse.
  9. №9. Визначте напрямки осей для flex-direction: column-reverse.
💡 Показати підказку

Запам'ятайте правило: flex-direction задає головну вісь, а поперечна вісь завжди перпендикулярна до неї.

✅ Показати відповідь
1. Горизонтальна головна вісь → поперечна зверху вниз.

2. Вертикальна головна вісь → поперечна зліва направо.

3. Якщо поперечна направлена вправо, головна може бути зверху вниз або знизу вверх.

4. Ні, поперечна вісь не може бути справа наліво.

5. Ні, поперечна вісь не може бути знизу вверх.

6. row:
Головна вісь — зліва направо.
Поперечна — зверху вниз.

7. column:
Головна вісь — зверху вниз.
Поперечна — зліва направо.

8. row-reverse:
Головна вісь — справа наліво.
Поперечна — зверху вниз.

9. column-reverse:
Головна вісь — знизу вверх.
Поперечна — зліва направо.