Pozycjonowanie i wstęp do Flexboksa

Czego się nauczysz

Do tej pory elementy na twojej stronie układały się jeden pod drugim. Na tej lekcji dowiesz się dlaczego – i jak to zmienić, żeby stanęły obok siebie.

Po tej lekcji:

• wyjaśnisz różnicę między display: block a display: inline,
• ustawisz display: flex na kontenerze i użyjesz justify-content oraz align-items,
• wyjaśnisz, jak działa position: relative.

Domyślny układ strony

• Większość znaczników (h1, p, div, ul) to elementy blokowe. Każdy zajmuje całą dostępną szerokość i ustawia się jeden pod drugim.
• Niektóre znaczniki (span, a, img) są liniowe (inline). Ustawiają się obok siebie, bez łamania wiersza.

Właściwość display

Można wymusić inny typ niż domyślny.

span { display: inline; }             /* domyślne dla span */
div { display: block; }               /* domyślne dla div */
.poziomo { display: inline-block; }

inline-block łączy cechy obu: ustawia się obok innych elementów jak inline, ale – inaczej niż zwykły inline – można mu ustawić width, height i pełny padding.

Na zwykłym elemencie inline width i height nie działają. To częsta niespodzianka.

Flexbox – jedna właściwość, która zmienia wszystko

.kontener {
    display: flex;
}

display: flex ustawiasz na rodzicu. Jego bezpośrednie dzieci automatycznie stają obok siebie w jednym wierszu – bez żadnych dodatkowych sztuczek.

Rozmieszczenie elementów we Flexboksie

.kontener {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

• justify-content rozmieszcza dzieci wzdłuż głównego kierunku (domyślnie poziomo). space-between rozsuwa je równomiernie do krawędzi.
• align-items wyrównuje je w poprzek (domyślnie pionowo). center wyśrodkowuje każde dziecko w pionie.

Position – wyjątki od normalnego układu

• static – domyślne. Normalny przepływ dokumentu, jedno po drugim.
• relative – element przesunięty (top, left…) względem swojej normalnej pozycji. Miejsce po nim zostaje puste.
• absolute – wyjęty z normalnego układu, pozycjonowany względem najbliższego przodka z position innym niż static.
• fixed – przyklejony do okna przeglądarki. Nie przewija się razem ze stroną.

position: relative warto poznać jako pierwszy – nie psuje układu reszty strony tak, jak absolute czy fixed.

Spróbuj sam

Do tej lekcji jest kod: index.html i style.css. Strona pokazuje po kolei elementy blokowe, liniowe i inline-block, potem trzy klocki we Flexboksie, a na końcu element przesunięty przez position: relative i element fixed.

W pliku style.css:

• zmień justify-content: space-between na center, a potem na space-around,
• usuń display: flex z kontenera i zobacz, jak klocki wracają do układu jeden pod drugim,
• odkomentuj width: 200px w regule .element-inline i sprawdź, że nic się nie zmienia.

Na karcie pracy do tej lekcji:

• zadania sprawdzające 1–3 – display, prosty Flexbox, position: relative,
• zadania domowe 1–5 – rozbudowa własnego układu Flexboksem.

Sprawdź się

• Wyjaśnię różnicę między display: block a display: inline.
• Ustawię display: flex na kontenerze i użyję justify-content oraz align-items.
• Wyjaśnię, jak działa position: relative.

Na następnej lekcji: sprawdzian – podsumowanie całego HTML i CSS z tego bloku.