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

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

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

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

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

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

<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;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

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

❗ Важливо:

Значення column змінює головну вісь flex-контейнера з горизонтальної на вертикальну.

row — елементи розташовані горизонтально зліва направо.
row-reverse — елементи розташовані горизонтально справа наліво.
column — елементи розташовані вертикально зверху вниз.
column-reverse — елементи розташовані вертикально знизу вверх.

📌 Завдання:

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

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

Для вертикального розташування flex-елементів використовуйте flex-direction: column.

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

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