Flex shrink kurczy mimo width i basis — jak temu zapobiec

Zapadanie zachodzi między elementami, które są w tym samym kontekście formatowania i nie mają między sobą żadnej treści, obramowania ani wypełnienia. Rodzic bez paddingu i borderu również łączy swój margines z marginesem pierwszego lub ostatniego dziecka — dlatego kontener z dzieckiem mającym margines górny potrafi odsunąć się od góry strony mimo braku własnego odstępu. Zapadanie nie działa w elementach, których układ jest elastyczny lub siatkowy, ani w kontekstach, które tworzą własne reguły, na przykład przy przewijaniu wewnątrz kontenera.

Typowy błąd to poleganie wyłącznie na width bez sprawdzenia, czy element nie jest przypadkiem elementem flex. Wiele osób ustawia width: 200px i dziwi się, że po dodaniu kilku elementów obok siebie szerokość się zmienia. Warto wtedy zajrzeć do inspektora i sprawdzić obliczoną wartość flex-shrink. Inny częsty problem to kontener z flex-wrap: nowrap — wtedy elementy nigdy nie przejdą do nowej linii, więc będą się kurczyć bez końca, aż do osiągnięcia min-width lub zera.

Kontener flex rozdziela wolną przestrzeń między elementy proporcjonalnie do ich współczynnika flex-shrink i szerokości bazowej. Jeśli suma szerokości bazowej przekracza dostępne miejsce, nadwyżka jest odejmowana od każdego elementu. Element z większą szerokością bazową straci proporcjonalnie więcej pikseli. Efekt bywa zaskakujący: wąski element może w ogóle nie ucierpieć, a szeroki skurczy się mocno, mimo że miał sztywne width.

Margin to z kolei przestrzeń na zewnątrz elementu. Oddziela go od sąsiadów i nie wpływa na jego wewnętrzne wymiary. Brzmi prosto, ale marginesy potrafią się składać – gdy dwa pionowe marginesy się spotkają, nie sumują się, lecz nachodzą na siebie, przyjmując większą wartość. To zjawisko znane jako collapsing margins. Dotyczy tylko marginesów pionowych i elementów w normalnym przepływie. Jeśli tego nie uwzględnisz, odstępy między sekcjami będą mniejsze, niż się spodziewasz.

Artykuł samodzielny i sekcja to dwa różne sposoby dzielenia treści na mniejsze jednostki. Artykuł (article) jest zamkniętą całością — ma własny temat, własny sens i może istnieć bez reszty dokumentu. Sekcja (section) to fragment większej całości, który bez kontekstu nadrzędnego traci znaczenie. W praktyce rozróżnienie sprowadza się do jednego pytania: czy dany blok treści ma sens, gdy wytniesz go z reszty strony i wkleisz gdzie indziej? Jeśli tak — to artykuł. Jeśli nie — to sekcja.

Jak zablokować kurczenie i kiedy to ma sens Najprostsze rozwiązanie to flex-shrink: 0 na elemencie, który ma zachować swoją szerokość. Wtedy przeglądarka nie zabierze mu ani piksela — nadwyżka zostanie zdjęta z pozostałych elementów. Uważaj jednak na konsekwencje: jeśli wszystkie elementy w rzędzie dostaną flex-shrink: 0, a ich suma przekroczy szerokość kontenera, pojawi się poziomy pasek przewijania albo zawartość wyjdzie poza obszar. Często lepiej ustawić flex-shrink: 0 tylko na kluczowym elemencie, np. na przycisku lub ikonie, a resztę zostawić elastyczną.

Typowy błąd polega na oznaczaniu każdego bloku jako article. Karta produktu, akapit o dostawie, lista pytań i odpowiedzi, komentarz pod wpisem — wszystko ląduje w article, bo „przecież to jakaś treść". Efekt jest odwrotny od zamierzonego: struktura dokumentu przestaje cokolwiek komunikować, a wyszukiwarki i czytniki ekranu nie wiedzą, gdzie kończy się jedna myśl, a zaczyna druga. Drugi częsty błąd to wrzucanie wszystkiego do jednej sekcji bez nagłówka — wtedy section pełni rolę ozdobnika, a nie realnego podziału.

Gdzie najczęściej popełnia się błąd Najczęstsza pomyłka to zmiana identyfikatora w treści bez poprawienia linków. Zmieniasz nagłówek z id="oferta" na id="uslugi", a stary odnośnik #oferta nadal gdzieś wisi — w menu, w przycisku, w stopce. Kliknięcie nic nie robi albo przewija stronę na samą górę. Przeglądarka nie zgłasza błędu, więc problem wychodzi dopiero u użytkownika. Drugi częsty przypadek: identyfikator jest na elemencie, który ma display: none lub zerową wysokość. Link istnieje, ale nie ma do czego przewinąć.

Praktyczna zasada na koniec: paddingiem reguluj wnętrze, marginesem odległości między elementami, a borderem granice. Zanim zaczniesz poprawiać odstępy, sprawdź w narzędziach deweloperskich, która warstwa faktycznie generuje przestrzeń. Najczęstsze błędy to mieszanie marginesu z paddingiem, zapominanie o box-sizing oraz liczenie na sumowanie się pionowych marginesów. Świadome operowanie tymi trzema warstwami daje layout, który nie rozjeżdża się przy zmianie treści.

Ustawiasz elementowi width: 300px albo flex-basis: 300px, a on i tak się kurczy. To nie błąd przeglądarki, tylko podstawowe działanie modelu flexbox. Domyślna wartość flex-shrink wynosi 1, co oznacza, że każdy element wewnątrz kontenera flex może zostać zmniejszony, gdy w rzędzie brakuje miejsca. Szerokość bazowa to tylko punkt wyjścia do obliczeń, a nie twardy limit.