Flexbox w praktyce: nawigacja, karty i układy sekcji

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• użyć flex-wrap, aby elementy mogły przejść do kolejnego wiersza,
• zrozumieć praktyczną różnicę między flex-basis, flex-grow i flex-shrink,
• zbudować prostą nawigację z logo, linkami i akcją,
• utworzyć responsywną listę kart bez wielu breakpointów,
• rozpoznać typowe problemy z nierównymi wysokościami i zbyt sztywnymi kartami.

Kontekst praktyczny

Flexbox jest świetny, gdy elementy tworzą linię albo serię podobnych bloków, które mają mieć kontrolowany odstęp i naturalnie reagować na szerokość ekranu. W realnym projekcie użyjesz go do menu, list kart, układów „ikona + opis”, stopki karty, paska filtrów albo sekcji z przyciskami.

Krótka powtórka Flexboxa

Flexbox zaczyna się od kontenera. To na rodzicu ustawiasz display: flex, a jego bezpośrednie dzieci stają się elementami flex. W praktyce najczęściej łączysz kilka właściwości naraz.

.section-list {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

Ta reguła mówi: ułóż dzieci w rzędzie, daj im równy odstęp i pozwól im rozciągnąć się w osi poprzecznej.

flex-wrap

Domyślnie elementy flex próbują zmieścić się w jednym wierszu. Gdy jest ich za dużo, mogą stać się zbyt wąskie albo wypchnąć układ poza ekran. flex-wrap: wrap pozwala im przejść do kolejnego wiersza.

.lesson-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

To bardzo ważne przy kartach, tagach, filtrach i grupach przycisków. Zamiast zgniatać elementy na siłę, pozwalasz układowi oddychać.

flex-basis, flex-grow i flex-shrink

Te trzy właściwości opisują, jak element flex zachowuje się względem dostępnego miejsca.

• flex-basis ustala bazowy rozmiar elementu przed podziałem wolnego miejsca.
• flex-grow mówi, czy element może urosnąć, gdy jest wolna przestrzeń.
• flex-shrink mówi, czy element może się zmniejszyć, gdy miejsca brakuje.

.lesson-card {
  flex: 1 1 16rem;
}

Zapis skrócony flex: 1 1 16rem oznacza: karta może rosnąć, może się zmniejszać i startuje od bazowej szerokości 16rem. To dobry wzorzec dla prostych responsywnych kart.

Nawigacja z Flexboxem

Nawigacja często ma trzy grupy: logo, linki i akcję. Flexbox pozwala rozmieścić je w jednym rzędzie, a na mniejszych ekranach bezpiecznie zawinąć.

Kopiuj<nav class="academy-nav" aria-label="Nawigacja kursu">
  <a class="academy-nav__logo" href="#">CSS Academy</a>
  <div class="academy-nav__links">
    <a href="#">Lekcje</a>
    <a href="#">Ćwiczenia</a>
    <a href="#">Projekty</a>
  </div>
  <a class="academy-nav__cta" href="#">Kontynuuj</a>
</nav>

.academy-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.academy-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

Interpretacja: główny kontener kontroluje trzy większe grupy, a wewnętrzne menu jest osobnym kontenerem flex dla linków. Dzięki temu nie mieszasz odpowiedzialności jednego layoutu z drugim.

Responsywne karty lekcji

Lista kart to dobry przykład dla flex-wrap i skrótu flex. Karty mogą mieć minimalny sensowny rozmiar, rosnąć na szerszym ekranie i zawijać się na mniejszym.

Kopiuj<section class="lesson-cards">
  <article class="lesson-card">
    <p>Lekcja 08</p>
    <h2>Flexbox w praktyce</h2>
    <p>Nawigacja, karty i układy sekcji.</p>
  </article>
  <article class="lesson-card">
    <p>Ćwiczenie</p>
    <h2>Lista kart</h2>
    <p>Elementy zawijają się, gdy brakuje miejsca.</p>
  </article>
  <article class="lesson-card">
    <p>Projekt UI</p>
    <h2>Sekcja kursu</h2>
    <p>Karty rosną i zwężają się w przewidywalny sposób.</p>
  </article>
</section>

.lesson-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.lesson-card {
  flex: 1 1 16rem;
  padding: 1rem;
}

Wizualnie powinieneś zobaczyć karty w jednym rzędzie na szerszym ekranie i naturalne zawijanie, gdy miejsca jest mniej.

Układ media object

Media object to klasyczny wzorzec: mały element wizualny obok treści, na przykład ikona przy opisie, avatar przy komentarzu albo miniatura przy artykule. Flexbox jest do tego bardzo wygodny.

.media-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.media-item__icon {
  flex: 0 0 3rem;
}

.media-item__body {
  flex: 1 1 auto;
}

Nierówne wysokości kart

Gdy jedna karta ma więcej tekstu niż pozostałe, układ może wyglądać nierówno. To nie zawsze jest błąd. Problem zaczyna się wtedy, gdy przyciski, stopki albo ważne elementy wypadają na różnych poziomach i utrudniają skanowanie.

Najprostszy wzorzec to ustawienie karty jako małego kontenera flex w kolumnie. Wtedy treść może urosnąć, a akcja może zostać przesunięta na dół.

.lesson-card {
  display: flex;
  flex-direction: column;
}

.lesson-card__action {
  margin-top: auto;
}

To praktyczne przy kartach produktów, lekcji i artykułów. Nie wymuszasz sztucznej wysokości, tylko pozwalasz karcie logicznie rozłożyć własną zawartość.

Najczęstsze błędy początkujących

• Brak flex-wrap: wrap na liście kart, przez co elementy robią się zbyt ciasne albo wychodzą poza ekran.
• Ustawianie sztywnego width tam, gdzie lepiej użyć flex-basis albo skrótu flex.
• Mylenie kontenera głównego z kontenerem wewnętrznym, np. próba ustawiania odstępów linków menu na całej nawigacji.
• Dodawanie dużych marginesów do pojedynczych kart zamiast użycia gap na rodzicu.
• Wymuszanie jednakowej wysokości kart przez height, co może obcinać dłuższą treść.

Mini zadanie

Zbuduj responsywną listę kart lekcji, która zawija się na mniejszych ekranach.

• Utwórz sekcję z co najmniej trzema kartami lekcji.
• Na rodzicu ustaw display: flex, flex-wrap: wrap i gap.
• Na karcie użyj skrótu, np. flex: 1 1 16rem.
• Dodaj w karcie nagłówek, krótki opis i link lub przycisk.
• Ustaw kartę jako display: flex z flex-direction: column, a akcję przesuń na dół przez margin-top: auto.

Na koniec zwęź okno przeglądarki i sprawdź, czy karty zawijają się naturalnie bez poziomego scrolla.

Checklista

• Wiem, kiedy dodać flex-wrap: wrap.
• Rozumiem, że flex-basis jest bazą rozmiaru, a nie sztywną szerokością.
• Potrafię użyć flex: 1 1 16rem w prostym układzie kart.
• Umiem rozdzielić zewnętrzny layout sekcji od wewnętrznego layoutu komponentu.
• Nie używam height do sztucznego wyrównywania kart z tekstem.
• Potrafię sprawdzić układ przez zwężenie okna przeglądarki.

Podsumowanie lekcji

Umiesz już użyć Flexboxa w praktycznych komponentach: nawigacji, liście kart i układzie media object. Wiesz, jak działa flex-wrap, do czego służy skrót flex oraz jak unikać sztywnych wysokości kart.

Kolejny krok w ścieżce layoutu to CSS Grid, czyli narzędzie lepiej dopasowane do układów dwuwymiarowych: kolumn i wierszy.