Flexbox pogłębiony

Czego się nauczysz

Z poprzedniego tematu znasz podstawę: kontener z display: flex ustawia dzieci obok siebie, justify-content rozmieszcza je wzdłuż głównego kierunku, a align-items wyrównuje w poprzek. Dziś dokładamy do tego pełną kontrolę nad układem.

Po tej lekcji:

• zmienisz kierunek Flexboksa na column i przewidzisz efekt,
• wyjaśnisz różnicę między flex-wrap: nowrap a flex-wrap: wrap,
• użyjesz flex-grow, żeby jeden element rósł szybciej niż inny,
• ustawisz odstępy właściwością gap.

flex-direction – kierunek głównej osi

.kontener {
    display: flex;
    flex-direction: column;
}

• row (domyślnie) układa dzieci poziomo, od lewej.
• row-reverse odwraca kolejność.
• column układa je pionowo, jedno pod drugim.
• column-reverse odwraca kolejność w pionie.

Zmiana kierunku na column zamienia rolami justify-content i align-items. justify-content zaczyna wtedy działać w pionie.

flex-wrap – gdy brakuje miejsca

Domyślnie (nowrap) elementy próbują zmieścić się w jednym wierszu. Potrafią się przy tym niepostrzeżenie skurczyć poniżej swojej ustawionej szerokości.

.kontener {
    display: flex;
    flex-wrap: wrap;
}

flex-wrap: wrap pozwala im zamiast tego przejść do kolejnego wiersza, zachowując swój rozmiar.

flex-grow – dzielenie wolnej przestrzeni

.stały   { flex-grow: 0; width: 60px; }
.rosnie1 { flex-grow: 1; }
.rosnie2 { flex-grow: 2; }

• flex-grow: 0 (domyślne) – element nie rośnie ponad swój naturalny rozmiar.
• Wyższa wartość oznacza, że element zabiera większą część wolnej przestrzeni, proporcjonalnie do innych.

flex-grow: 2 obok flex-grow: 1 zabierze dwa razy więcej z tego, co zostało wolne – nie dwa razy więcej całej szerokości.

align-self – wyjątek dla jednego elementu

.kontener { align-items: flex-start; }
.wyjatek  { align-self: center; }

Gdy kontener ma align-items: flex-start, wszystkie dzieci wyrównują się do góry. Pojedyncze dziecko z align-self: center ignoruje tę regułę rodzica i wyśrodkowuje się samo, nie wpływając na resztę.

align-content – wyrównanie wielu wierszy

Gdy elementy zawijają się do kilku wierszy, align-content decyduje, jak te całe wiersze rozłożą się w pionie. Na przykład space-between rozsuwa je do góry i do dołu kontenera.

Działa tylko razem z flex-wrap: wrap i gdy w pionie jest wolna przestrzeń. To inna właściwość niż align-items, która wyrównuje elementy wewnątrz jednego wiersza.

gap – odstępy bez marginesów

.kontener {
    display: flex;
    gap: 15px 5px;
}

gap: 20px ustawia jednakowy odstęp między wszystkimi elementami – bez odstępów na krawędziach kontenera, jak to bywa z margin. Dwie wartości oznaczają: najpierw odstęp pionowy, potem poziomy.

Spróbuj sam

Do tego tematu jest kod: index.html i style.css. Tej lekcji dotyczy część 1 strony, przykłady od 1a do 1f.

W pliku style.css:

• w regule .kontener-kierunek zmień flex-direction: column na row i porównaj efekt,
• w regule .kontener-zawijanie usuń flex-wrap: wrap i zobacz, jak klocki się kurczą,
• zamień wartości flex-grow w .rosnie1 i .rosnie2.

Na karcie pracy do tej lekcji:

• zadania sprawdzające 1–3 – flex-direction, flex-wrap, flex-grow,
• zadania domowe 1–5 – align-self, align-content, gap i połączenie właściwości w jednym układzie.

Sprawdź się

• Zmienię kierunek Flexboksa na column i przewidzę efekt.
• Wyjaśnię różnicę między flex-wrap: nowrap a flex-wrap: wrap.
• Użyję flex-grow, żeby jeden element rósł szybciej niż inny.

Na następnej lekcji: CSS Grid – układanie elementów w wierszach i kolumnach jednocześnie.