Розділ 2 · Завдання 11

Flexbox

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

Завдання

Додайте в style.css:

style.css

.row {
  display: flex;
  gap: 20px;
}

.mini-card {
  width: 140px;
  padding: 16px;
  background-color: #e0f0ff;
  border-radius: 10px;
  text-align: center;
}

І в styles-demo.html

Додайте:

styles-demo.html

<div class="row">
  <div class="mini-card">Картка 1</div>
  <div class="mini-card">Картка 2</div>
  <div class="mini-card">Картка 3</div>
</div>

Як це читати

display: flex; на батьківському блоці каже: «усі мої прямі діти став в один ряд, а не одну під одною».

gap: 20px; — відстань між картками, замість того щоб задавати margin кожній окремо.

Порада

Щоб вирівняти по центру ряду, додай у .row: justify-content: center;. Інші значення: flex-start (за замовчуванням), flex-end, space-between.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща