Gdy elementy nie mieszczą się w wierszu, kto oddaje, a kto zabiera miejsce
Rozwiązanie jest proste: ustaw na elemencie min-width: 0. Wtedy przeglądarka przestaje brać pod uwagę naturalną szerokość treści jako dolną granicę i pozwala elementowi się kurczyć. W układzie pionowym, czyli przy flex-direction: column, analogicznie działa min-height: 0, ponieważ wtedy kolumna ma domyślnie auto i nie zmniejszy się poniżej wysokości swojej zawartości.<br>
<br>
<br>
<br>
Zacznij od sprawdzenia, czy reguły rzeczywiście są równoważne. Dwie deklaracje mogą wyglądać podobnie, ale mieć inną specyficzność — wtedy kolejność nie ma znaczenia, bo wygrywa bardziej szczegółowy selektor. Typowy błąd to dopisywanie nowej reguły na końcu pliku i zdziwienie, że nic się nie zmieniło. Warto wtedy zajrzeć w narzędzia deweloperskie i sprawdzić, która deklaracja jest przekreślona. Przekreślenie oznacza, że została nadpisana — i od razu widać, przez co.<br>
<br>
<br>
<br>
Nie mieszaj jednostek bez powodu w obrębie jednego komponentu. Tekst w rem, padding w px i margines w em to przepis na układ, który rozjeżdża się przy zmianie skali. Wybierz system: bazę w html, typografię w rem, odstępy w rem, a em zostaw na wyjątki. Sprawdź efekt, powiększając czcionkę w przeglądarce do 150 procent — jeśli układ pęka, winne są piksele w miejscach, w których ich być nie powinno.<br>
<br>
<br>
<br>
Praktyczna zasada jest krótka: przezroczystość, tekst, ikony, ostre krawędzie i płaskie kolory – PNG. Zdjęcia, gradienty, faktury i duże obrazy, gdzie liczy się rozmiar – JPG. Zrzuty ekranu zapisuj w PNG, bo w JPG tekst stanie się niewyraźny. Jeśli obraz ma zarówno przezroczyste tło, jak i zdjęciową fakturę, sprawdź, czy przezroczystość jest naprawdę potrzebna. Czasem lepiej przygotować wersję JPG z gotowym tłem niż zmuszać PNG do przenoszenia ciężkich zdjęć. I pamiętaj, że konwersja z JPG na PNG nie przywróci utraconej jakości – ratuje tylko przezroczystość, której wcześniej nie było.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
JPG wybieraj do zdjęć i obrazów o ciągłej tonacji: portretów, pejzaży, zdjęć produktowych na jednolitym tle, materiałów z dużą liczbą kolorów przechodzących płynnie jeden w drugi. Format radzi sobie z taką treścią znacznie lepiej niż PNG, bo potrafi odrzucić drobne różnice w odcieniach, których oko i tak nie rozróżnia. Dzięki temu plik jest mniejszy. Jeśli zdjęcie ma trafić na stronę, do wiadomości e-mail albo do dokumentu, JPG zwykle wystarczy. Ustaw jakość na tyle wysoką, by nie było widać artefaktów, ale nie na maksimum – zapis w najwyższej jakości daje duży plik bez zauważalnej poprawy.<br>
<br>
<br>
<br>
Praktyczna zasada jest prosta: sztywną szerokość stosuj do elementów, które naprawdę mają stały wymiar — ikon, awatarów, wąskich paneli. Do elastycznych kolumn używaj flex-basis i flex-grow, a flex-shrink traktuj jako narzędzie do kontroli zachowania w niedoborze miejsca, nie do naprawiania błędów w strukturze. Zanim dodasz kolejne width z konkretną wartością, sprawdź układ na wąskim ekranie i przy powiększonym tekście. Właśnie tam najczęściej wychodzi różnica między pozorną sztywnością a rzeczywistym zachowaniem flexboxa.<br>
<br>
<br>
<br>
Zacznij od ustawienia bazowego rozmiaru na elemencie głównym, czyli html. Wpisanie tam wartości procentowej lub jednostki rem sprawia, że cała strona respektuje wybór użytkownika. Dopiero potem nadawaj rozmiary poszczególnym elementom. Jeśli bazę ustawisz w pikselach, odcinasz użytkownika od jego preferencji — powiększanie czcionki w przeglądarce przestaje działać na korzyść tekstu. To najczęstszy błąd przy przepisywaniu projektu na jednostki względne.<br>
<br>
<br>
<br>
Typowe błędy to mieszanie flex-basis z width, ustawianie flex-grow bez flex-basis i zapominanie o min-width: 0 przy elementach z długim tekstem. Elementy flex domyślnie mają min-width: auto, co potrafi zablokować kurczenie poniżej rozmiaru treści. Dodanie min-width: 0 do elementu potomnego odblokowuje shrink i pozwala tekstowi się zawijać. Kolejna pułapka to procenty w flex-basis przy kontenerze bez określonej szerokości — wartości procentowe nie mają wtedy punktu odniesienia i mogą zostać zignorowane. Najbezpieczniej zaczynać od flex: 1 1 0, a potem dostrajać poszczególne elementy, obserwując, który rzeczywiście zabiera wolne miejsce.<br>
<br>
<br>
<br>
Odwrotna pułapka polega na ustawianiu flex-shrink: 0 bez świadomości konsekwencji. Element przestaje się kurczyć, więc całe niedobory miejsca przenoszą się na sąsiadów. Te mogą zniknąć zupełnie albo spaść do zera. Przy kilku takich elementach układ potrafi się rozjechać dopiero na średnich szerokościach, gdy suma minimalnych wymiarów przekracza dostępną przestrzeń. Warto wtedy sprawdzić, czy nie lepiej użyć flex-basis z wartością procentową i pozwolić przeglądarce rozdzielić miejsce proporcjonalnie.