Flex shrink kurczy element mimo szerokości, gdy zapomnisz o tym jednym

Jak zatrzymać kurczenie i kiedy to naprawdę potrzebne Najprostsze rozwiązanie to flex-shrink: 0 na elemencie, który ma zachować szerokość. Wtedy nie odda ani piksela, a nadmiar zostanie ściśnięty na pozostałych. Uwaga na drugą stronę: jeśli wszystkie elementy dostaną zero, zawartość wyjedzie poza kontener i pojawi się poziomy pasek przewijania. Czasem to zamierzone, ale częściej oznacza, że czegoś brakuje — na przykład flex-wrap: wrap albo krótszej treści.

Najczęstszy błąd to jeden format dla wszystkiego. Ikona zapisana jako JPEG traci ostrość i dostaje brudne tło wokół kształtu. Wykres zapisany jako PNG w niskiej rozdzielczości rozmywa się przy powiększeniu. Zdjecie zapisane jako SVG nie istnieje — wektoryzacja automatyczna zwykle daje karykaturalne efekty. Zanim wybierzesz format, zadaj sobie dwa pytania: czy element będzie skalowany oraz czy potrzebuje przezroczystości. Odpowiedź wskaże właściwy typ pliku szybciej niż jakiekolwiek narzędzie.

Dla ikon wybierz SVG, gdy mają trafić na stronę lub do aplikacji. SVG to tekstowy opis kształtów, więc ta sama ikona wygląda dobrze na ekranie telefonu i na monitorze 4K. Uważaj na efekty rastrowe wewnątrz SVG — filtry, cienie i tekstury często są zapisane jako bitmapa i psują skalowanie. Drugi typowy błąd to eksport ikony do PNG w jednym rozmiarze, np. 24×24 px, a potem powiększanie jej w edytorze. Wtedy krawędzie się rozmywają, a cienkie linie znikają. Jeśli musisz użyć PNG, przygotuj osobne pliki dla każdego rozmiaru: 16, 24, 32, 48 i 64 px.

Elementy section i article mają różne znaczenie i nie należy ich traktować jako zamienników. Zagnieżdżanie ich w sobie jest poprawne tylko wtedy, gdy struktura treści naprawdę na to pozwala. Każdy z tych elementów musi mieć dostępną nazwę — najczęściej przez nagłówek. Jeśli wstawiasz section bez nagłówka albo bez etykiety, staje się on dla czytnika ekranu nic nieznaczącym pojemnikiem.

Praktyczna wskazówka: przed dodaniem znacznika zadaj sobie pytanie, czy w spisie treści dokumentu ten fragment powinien się pojawić jako osobna pozycja. Jeśli tak — to section lub article. Jeśli nie — to div. Dla article dodatkowo sprawdź, czy mógłbyś go skopiować na inną stronę i nadal miałby sens. Gdy odpowiedź brzmi „nie", to raczej section, a nie article. Gdy „tak" — article.

Zanim dodasz flex-shrink: 0, sprawdź, czy element naprawdę ma być sztywny. Często lepszym wyjściem jest pozwolenie mu się kurczyć, ale z sensownym minimum i zawijaniem tekstu. Sztywne bloki w wąskich kontenerach to najczęstsza przyczyna rozjechanych layoutów na mniejszych ekranach. Krótko mówiąc: najpierw ustal, co ma ustąpić, potem dopiero blokuj kurczenie.

Selektor znacznika celuje we wszystkie elementy danego typu, na przykład akapity albo listy. Zapis jest krótki i nie wymaga dopisywania niczego w HTML-u. Problem pojawia się, gdy ten sam znacznik pełni na stronie różne role — wtedy jedna reguła zaczyna wpływać na miejsca, których wcale nie chciałeś ruszać. To najczęstsze źródło sytuacji, w której poprawka w jednym miejscu psuje układ w trzech innych.

Nie mieszaj też nagłówków bez planu. Każdy section i article powinien mieć nagłówek, ale nie musisz zaczynać od h1. Wystarczy hierarchia od h2 w dół, zależnie od kontekstu. Pamiętaj, że walidator HTML nie wychwyci błędów semantycznych — one nie psują kodu, ale utrudniają korzystanie ze strony. Dlatego zamiast mnożyć znaczniki, lepiej najpierw rozpisz strukturę treści, a potem dopasuj do niej elementy.

Liczba komórek w każdym wierszu powinna się zgadzać, chyba że świadomie używasz colspan lub rowspan. Najczęstszy błąd to pominięcie komórki w jednym wierszu — wtedy cała siatka przesuwa się o jedną kolumnę i nagłówki przestają pasować do danych. Gdy łączysz komórki, pamiętaj, że wartość colspan oznacza liczbę kolumn, które komórka zajmuje, a nie liczbę dodatkowych kolumn. To samo dotyczy rowspan w pionie.

Gdy w kontenerze flex zostaje wolne miejsce, przeglądarka rozdziela je między elementy proporcjonalnie do wartości flex-grow. Każdy element dostaje część wolną równą swojemu współczynnikowi podzielonemu przez sumę współczynników wszystkich elementów w linii. Jeśli trzy elementy mają flex-grow: 1, 2 i 1, to wolne miejsce dzieli się na cztery części: pierwszy dostaje jedną, drugi dwie, trzeci jedną. Wartość 0 oznacza, że element nie bierze udziału w podziale i pozostaje przy swojej bazie.

Kolejna pułapka to mieszanie width z flex-basis. Gdy oba są ustawione, flex-basis wygrywa, a width staje się ignorowane w obliczeniach. Efekt bywa mylący: zmieniasz szerokość, a nic się nie dzieje. Zamiast zgadywać, ustaw jedną wartość bazową i dopiero potem reguluj kurczenie i rozciąganie. Warto też pamiętać, że flex-shrink działa tylko w głównej osi — przy flex-direction: column kurczy wysokość, nie szerokość.