Урок 196 із 239
82%
← Назад

Розміщення flex-елементів у перевернутому ряду в CSS

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

Розміщення flex-елементів у перевернутому ряду в CSS

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

За замовчуванням flex-direction має значення row, тому елементи розташовуються у звичайний ряд зліва направо.

Значення row-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: row-reverse;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
❗ Важливо:

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

  • flex-direction: row — стандартний напрямок зліва направо.
  • flex-direction: row-reverse — напрямок справа наліво.
  • Перший елемент HTML стає крайнім праворуч.
  • Часто використовується для зміни порядку блоків без зміни HTML.
📌 Завдання:
  1. №1. Створіть flex-контейнер із трьома дочірніми блоками.
  2. №2. Додайте властивість flex-direction: row-reverse.
  3. №3. Перевірте, як змінився порядок елементів.
💡 Показати підказку

Значення row-reverse змінює тільки напрямок відображення flex-елементів, але не змінює їх порядок у HTML.

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