INF.03 · HTML i CSS
Model pudełkowy i podstawy layoutu (flexbox)
Układ reagujący na dostępną przestrzeń.
- Przewidź efekt
- Zmień i sprawdź
- Zbuduj samodzielnie
Po tej lekcji: Ułożysz karty za pomocą flexboxa oraz zbudujesz prosty responsywny układ Grid.
Zrozum, zanim zapiszesz
Pudełko składa się z content, padding, border i margin. Flexbox porządkuje bezpośrednie dzieci kontenera: display: flex, gap, flex-wrap, justify-content w osi głównej i align-items w osi poprzecznej. Kierunek osi zależy od flex-direction. flex: 1 1 12rem ustala wzrost, kurczenie i rozmiar bazowy.
Grid przydaje się do układu wierszy i kolumn: display: grid; grid-template-columns: 14rem minmax(0, 1fr). minmax(0, 1fr) pozwala głównej kolumnie się zwęzić. W media query, np. @media (max-width: 45rem), ustaw jedną kolumnę. Dodaj viewport w head.
Nie buduj całego layoutu za pomocą br, spacji ani tabeli danych. Sprawdź szerokości 390 i 1280 px oraz tekst powiększony do 200%. Sztywne wysokości mogą ucinać tekst, a długi adres wymaga np. overflow-wrap: anywhere.
Przygotuj HTML do tego przykładu
Ten fragment wstaw do body dokumentu z lekcji 1. W head dodaj <link rel="stylesheet" href="style.css">. Kolejny blok zapisz w osobnym pliku style.css, obok index.html.
<header><h1>Kino szkolne</h1></header>
<div class="uklad">
<nav><a href="#seanse">Seanse</a></nav>
<main id="seanse" class="karty">
<article class="karta"><h2>Podróż</h2><p>16:00</p></article>
<article class="karta"><h2>Kosmos</h2><p>18:00</p></article>
<article class="karta"><h2>Dom</h2><p>20:00</p></article>
</main>
</div>
<footer>Koło filmowe</footer>Przykład do odtworzenia
* { box-sizing: border-box; }
.uklad { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1rem; }
.karty { display: flex; flex-wrap: wrap; gap: 1rem; }
.karta { flex: 1 1 12rem; padding: 1rem; border: 1px solid #597; min-width: 0; }
@media (max-width: 45rem) {
.uklad { grid-template-columns: 1fr; }
}Sprawdź w działaniu
Zmień szerokość, obserwuj przepływ
Zwęż obszar podglądu, przełącz wrap i porównaj Flexbox z Grid. To rzeczywiste reguły CSS.
Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.
Ćwiczenie z pomocą · samodzielna praca
Zbuduj samodzielnie — z pomocą, gdy potrzebujesz
Zbuduj header, nav, main i footer. W main umieść trzy karty wydarzeń. Karty mają tworzyć układ flex z gap 1rem i zawijaniem. Dodaj media query: poniżej 45rem nawigacja ma znaleźć się nad main zamiast obok niego.
Przy szerokim oknie widać pasek boczny i treść, przy wąskim jedną kolumnę; żadna karta nie wychodzi poza ekran.
? Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź
Ustaw kontener układu na Grid z dwiema kolumnami.
Krok 2 — pokaż podpowiedź
W kontenerze kart ustaw display:flex i flex-wrap:wrap.
Krok 3 — pokaż podpowiedź
W media query zmień grid-template-columns na 1fr i sprawdź podgląd telefonu.
Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.
Sprawdź, zanim oddasz
Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.
Podsumowanie
Co warto zapamiętać
- Ułożysz karty za pomocą flexboxa oraz zbudujesz prosty responsywny układ Grid.
- Potrafisz wskazać w kodzie przyczynę widocznego efektu.
- Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.
Dalej na swoim koncie
Rozgrzewki, quiz i zadania są w biurku ucznia.
Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.
Zaloguj się →