Gdy flex-shrink nie kurczy elementu, sprawdź ten warunek

Elementy section i article wyglądają podobnie w kodzie, ale pełnią różne role. article to samodzielna całość, którą można wyciąć z dokumentu i opublikować gdzie indziej — wpis na blogu, komentarz, karta produktu. section to wydzielony fragment większej historii, który bez kontekstu traci sens — rozdział, zakładka, grupa akapitów o jednym wątku. Zagnieżdżanie ich w dowolnej kolejności jest poprawne, o ile każde użycie ma uzasadnienie w treści, a nie w wyglądzie.

Kolejna pułapka to wymiary elementów. Element flex nie kurczy się poniżej swojej minimalnej zawartości, dopóki nie ustawisz min-width: 0. Długi tekst potrafi rozepchnąć cały rząd i zepsuć układ, mimo że szerokości wyglądają dobrze w kodzie. Jeśli elementy mają się dzielić przestrzenią, użyj flex: 1 i zadbaj o min-width: 0 na tych, które zawierają treść.

Kluczowa rzecz: flex-basis działa tylko na bezpośrednich dzieciach kontenera flex. Jeśli ustawisz procent na wnuku, który nie jest elementem flex, nic się nie stanie. Drugi warunek: rodzic musi mieć określoną szerokość lub wysokość, bo procent z niczego nie policzy się poprawnie. Gdy rodzic jest elementem inline, ma width: auto albo jego rozmiar zależy tylko od zawartości, procent może zostać zignorowany lub policzony w nieprzewidywalny sposób. Najprostsze zabezpieczenie to nadanie rodzicowi konkretnej szerokości, max-width albo display: flex z określonym rozmiarem.

Gdy kontener istnieje, flexbox wyznacza oś główną. Domyślnie biegnie ona poziomo, od lewej do prawej, a oś poprzeczna pionowo. Wszystko, co robisz później, odnosi się właśnie do tych osi. justify-content działa wzdłuż osi głównej, align-items wzdłuż poprzecznej. Zamiana flex-direction na column obraca obie osie, więc właściwości zaczynają działać w innych kierunkach, niż się spodziewasz.

Uwaga na nagłówki. Section i article bez nagłówka to sygnał, że element został użyty przypadkowo. Przeglądarki i technologie asystujące budują z nagłówków spis treści, więc pominięcie h2 lub h3 w tych znacznikach rozjeżdża strukturę dokumentu. Kolejny typowy błąd to zagnieżdżanie article w article bez powodu. Dopuszczalne jest np. artykuł z komentarzami, gdzie każdy komentarz to osobny article, ale trzy poziomy article w article w article to prawie zawsze nadużycie.

Oś główna decyduje o wszystkim Zanim ustawisz cokolwiek innego, sprawdź, gdzie leży oś główna. Jeśli chcesz rozsunąć elementy w poziomie, zostaw domyślny wiersz i użyj justify-content: space-between. Jeśli chcesz je rozsunąć w pionie, ustaw flex-direction: column i dopiero wtedy użyj justify-content. Mylenie tych dwóch przypadków to powód, dla którego „nic się nie zmienia", gdy dodajesz regułę. Przeglądarka działa poprawnie — twoje założenie o osi jest błędne.

Uważaj na łączenie wielu źródeł stylów. Kolejność arkuszy, kolejność bloków w pliku i kolejność importów sumują się w jedną wspólną listę. Reguła z arkusza dołączonego później może nadpisać wszystko, co było wcześniej, nawet jeśli w tamtym pliku wyglądała niewinnie. Podobnie jest z regułami wstawionymi bezpośrednio w atrybucie stylu — one mają wyższy priorytet niż zwykłe reguły z arkusza, więc żadna późniejsza linia ich nie przebije, dopóki nie użyjesz odpowiedniego znacznika ważności.

Praktyczna zasada: article dla rzeczy, które mogłyby trafić do kanału RSS, section dla części tej samej rzeczy. Nie mieszaj ich bezmyślnie tylko dlatego, że edytor graficzny podpowiada takie opakowanie. Sprawdź kod po wygenerowaniu strony — jeśli w środku section widzisz article bez nagłówka albo section bez treści, uprość strukturę. Dobre użycie tych znaczników nie zmienia wyglądu, ale poprawia dostępność, porządkuje dokument i ułatwia późniejszą rozbudowę.

Osobnym przypadkiem są elementy zastępowane, jak obrazy, oraz elementy z overflow: visible. Obraz bez max-width: 100% rozepchnie kontener i flex-shrink nic nie pomoże. Podobnie element z widoczną treścią, która wystaje poza jego granice, może wymuszać minimalny rozmiar. Ustawienie overflow: hidden lub auto na elemencie rodzica często odblokowuje kurczenie, bo przeglądarka widzi, że treść może zostać obcięta lub przewinięta.

Najczęstszy błąd to zamiana obu znaczników w ozdobniki layoutu. Ktoś opakowuje w section nagłówek i menu, a w article wrzuca boks z reklamą. To działa wizualnie, ale psuje semantykę i utrudnia nawigację czytnikom ekranu oraz robotom wyszukiwarek. Zanim wpiszesz section lub article, zadaj sobie pytanie: czy ten fragment ma własny nagłówek i czy zachowa sens po przeniesieniu w inne miejsce. Jeśli nie, użyj zwykłego div.

Kiedy section wchodzi w article, a kiedy article w section Układ article wewnątrz section sprawdza się, gdy section grupuje wiele niezależnych materiałów. Przykład: section „Aktualności" zawiera trzy osobne artykuły, każdy z własnym tytułem, datą i autorem. Odwrotny układ — section wewnątrz article — stosujesz, gdy jeden tekst dzieli się na logiczne części. Długi poradnik może mieć wewnątrz artykuły sekcje „Przygotowanie", „Wdrożenie" i „Najczęstsze problemy". Każda z nich dostaje własny nagłówek h2, a całość pozostaje jednym artykułem.