Перевертання колонки з flex-елементами в CSS

Вивчаємо значення column-reverse властивості flex-direction для створення перевернутої колонки flex-елементів.

Перевертання колонки з flex-елементами в CSS

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

Якщо використати значення column, елементи розташовуються зверху вниз у вигляді колонки.

Значення column-reverse працює навпаки: елементи розташовуються в колонку знизу вгору.

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

.parent {
  display: flex;
  flex-direction: column-reverse;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

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

❗ Важливо:

column-reverse не змінює HTML-код. Він лише змінює візуальний порядок відображення flex-елементів.

flex-direction: column створює колонку зверху вниз.
flex-direction: column-reverse створює колонку знизу вверх.
Перший елемент у HTML при column-reverse буде останнім на екрані.
Це корисно для створення перевернутих списків, чатів та панелей.

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

📌 Завдання:

№1. Створіть flex-контейнер із трьома дочірніми блоками.
№2. Додайте властивість flex-direction зі значенням column-reverse.
№3. Перевірте, як змінився порядок елементів.

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

Використовуйте column-reverse, якщо потрібно розташувати flex-елементи у колонку, але почати відображення знизу.

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

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