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

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

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

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

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

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

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
.parent {
  display: flex;
  border: 1px solid red;
}

.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.parent {
  display: flex;
  flex-direction: row;
}
❗ Важливо:

Якщо flex-direction не вказати, браузер автоматично використовує значення row.

  • row — елементи розташовуються в ряд зліва направо.
  • column — елементи розташовуються зверху вниз.
  • row-reverse — елементи розташовуються в ряд у зворотному порядку.
  • column-reverse — елементи розташовуються знизу вверх у зворотному порядку.
.parent {
  display: flex;
  flex-direction: column;
}
📌 Завдання:
  1. №1. Створіть flex-контейнер із трьома блоками.
  2. №2. Перевірте стандартне значення flex-direction.
  3. №3. Змініть напрямок елементів за допомогою column.
  4. №4. Спробуйте значення row-reverse та column-reverse.
💡 Показати підказку

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

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