Вирівнювання flex-елементів по головній осі в CSS

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

Вирівнювання flex-елементів по головній осі в CSS

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

Напрямок головної осі залежить від властивості flex-direction. Значення row направляє вісь зліва направо, row-reverse — справа наліво, column — зверху вниз, а column-reverse — знизу вверх.

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

.parent {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.parent {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.parent {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.parent {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

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

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

При flex-direction: column значення flex-end розташовує елементи біля нижнього краю контейнера.

.parent {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
}

У цьому випадку flex-start притискає елементи до початку головної осі — нижнього краю.

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

❗ Важливо:

Запам'ятайте: justify-content працює не просто зліва або справа. Він працює відносно напрямку головної осі.

flex-start — елементи на початку головної осі.
flex-end — елементи в кінці головної осі.
row — початок зліва, кінець справа.
row-reverse — початок справа, кінець зліва.
column — початок зверху, кінець знизу.
column-reverse — початок знизу, кінець зверху.

📌 Завдання:

№1. Створіть flex-контейнер з трьома блоками.
№2. Перевірте роботу justify-content: flex-start.
№3. Перевірте роботу justify-content: flex-end.
№4. Змініть flex-direction на row-reverse і порівняйте результат.
№5. Змініть flex-direction на column та column-reverse.

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

Спочатку визначте напрямок головної осі через flex-direction, а потім використовуйте justify-content для вирівнювання по цій осі.

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

.parent {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.parent {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}