Model pudełkowy i podstawy layoutu (flexbox)

Po co się tego uczymy?

Bez zrozumienia modelu pudełkowego i flexboxa nie da się poukładać elementów strony obok siebie w sposób przewidywalny — to jest narzędzie, dzięki któremu katalog filmów wyświetli się jako siatka kart, a nie pionowa lista jedna pod drugą.

Teoria

Każdy element HTML przeglądarka traktuje jako prostokątne "pudełko" (box model) złożone z czterech warstw, licząc od środka: content (sama treść — tekst, obrazek), padding (odstęp wewnętrzny między treścią a obramowaniem), border (obramowanie) i margin (odstęp zewnętrzny, oddzielający element od sąsiadów).

Właściwości width/height określają rozmiar warstwy content, a padding, border, margin dokładają kolejne warstwy WOKÓŁ niej.

Flexbox to najprostszy sposób układania wielu elementów obok siebie (albo pod sobą) bez skomplikowanych obliczeń. Ustawiasz display: flex; na RODZICU (kontenerze), a jego dzieci automatycznie układają się w rzędzie:
flex-direction: row/column — kierunek (rząd/kolumna).
justify-content: center/space-between/flex-start — rozmieszczenie w poprzek głównej osi.
align-items: center — wyrównanie w poprzek osi bocznej.
gap: 16px — odstęp między elementami, bez potrzeby ustawiania marginesów na każdym z osobna.

Schemat

Model pudełkowy (box model) pojedynczego elementu:

┌───────────────── margin (margines zewnętrzny) ─────────────────┐
│  ┌───────────── border (obramowanie) ─────────────┐            │
│  │  ┌───────── padding (odstęp wewnętrzny) ─────┐  │            │
│  │  │                                            │  │            │
│  │  │            content (treść)                │  │            │
│  │  │                                            │  │            │
│  │  └────────────────────────────────────────────┘  │            │
│  └────────────────────────────────────────────────┘            │
└──────────────────────────────────────────────────────────────┘

Przykład z życia

Każdy sklep internetowy, który widziałeś, pokazuje produkty w siatce kart ułożonych obok siebie, automatycznie zawijających się do kolejnego rzędu na mniejszym ekranie — to właśnie display: flex z flex-wrap: wrap.

Kod (CSS)

<style>
    .katalog {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }

    .karta-filmu {
        width: 200px;
        padding: 16px;
        border: 1px solid #ccc;
        background-color: white;
        text-align: center;
    }
</style>

<div class="katalog">
    <div class="karta-filmu">
        <h3>Podróż w czasie</h3>
        <p>9.99 zł</p>
    </div>
    <div class="karta-filmu">
        <h3>Ostatni bastion</h3>
        <p>7.99 zł</p>
    </div>
    <div class="karta-filmu">
        <h3>Cichy ocean</h3>
        <p>11.99 zł</p>
    </div>
</div>

Komentarz i wyjaśnienie kodu

flex-wrap: wrap pozwala kartom "zawinąć się" do nowego rzędu, gdy zabraknie miejsca w poziomie — bez tego wszystkie karty próbowałyby zmieścić się w jednej linii, ścieśniając się. gap: 16px to nowoczesny sposób na odstępy między elementami flex — starszy sposób wymagałby ustawiania margin na każdej karcie osobno i ręcznego usuwania marginesu przy ostatniej w rzędzie.

Ćwiczenie samodzielne

Zbuduj trzy "karty" (np. z opisem swoich umiejętności) ułożone obok siebie za pomocą display: flex.

Zadania do pracy własnej

Ustaw dowolny formularz tak, żeby etykieta i pole leżały obok siebie w jednym rzędzie (użyj flex na kontenerze opakowującym każdą parę label+input).
Zbuduj pasek nawigacyjny (menu) z linkami ułożonymi w rzędzie za pomocą flex, z równymi odstępami (justify-content: space-between).
Zbuduj kompletną siatkę katalogu filmów (co najmniej 6 kart) z flexboxem, zawijaniem do nowego rzędu i jednolitym stylem kart (obramowanie, cień, zaokrąglone rogi) — to ostateczna wersja katalogu, który w dziale PHP (Lekcja 11) wypełnisz danymi z bazy zamiast wpisywać je ręcznie.

Typowe błędy

Częsty błąd to ustawienie display: flex na niewłaściwym elemencie — musi być na RODZICU (kontenerze), nie na dzieciach, które mają się ułożyć obok siebie. Drugi błąd: zapomnienie flex-wrap: wrap przy zmiennej liczbie elementów, co powoduje ściskanie ich w jedną linię na wąskich ekranach. Trzeci: mylenie justify-content (rozmieszczenie wzdłuż głównej osi) z align-items (wyrównanie w poprzek) — przy flex-direction: row to odpowiednio pozioma i pionowa oś.

Nawiązanie do egzaminu zawodowego

Podobnie jak reszta CSS, flexbox nie ma własnego, nazwanego wprost efektu w podstawie programowej INF.03.5, ale bez niego żaden praktyczny projekt webowy (w tym kapsztonowy serwis filmowy z działu PHP) nie wyglądałby na gotowy, użyteczny produkt — a to jest realistycznie oceniane w zadaniach praktycznych na egzaminie.