Rozdział 2 · Zadanie 11

Flexbox

Ustawiamy kilka bloków obok siebie, w jednym rzędzie, zamiast jeden pod drugim.

Zadanie

Dodaj do style.css:

style.css

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

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

A w styles-demo.html

Dodaj:

styles-demo.html

<div class="row">
  <div class="mini-card">Karta 1</div>
  <div class="mini-card">Karta 2</div>
  <div class="mini-card">Karta 3</div>
</div>

Jak to czytać

display: flex; na bloku nadrzędnym mówi: «wszystkie moje bezpośrednie dzieci ustaw w jednym rzędzie, a nie jedno pod drugim».

gap: 20px; — odstęp między kartami, zamiast ustawiać margin każdej osobno.

Wskazówka

Żeby wyśrodkować w rzędzie, dodaj w .row: justify-content: center;. Inne wartości: flex-start (domyślnie), flex-end, space-between.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska