Gdy flex-basis walczy z width, sprawdź, co wygrywa w layoucie
Kiedy dwuklik zawodzi, choć plik jest popraw<br>
<br>
<br>
<br>
Inny częsty błąd to łączenie width z flex-basis w różnych jednostkach. Gdy flex-basis: 50% i width: 300px, procent odnosi się do rozmiaru kontenera, a piksele do stałej wartości. W zależności od szerokości rodzica raz wygrywa jedno, raz drugie — ale tylko wizualnie, bo formalnie i tak decyduje flex-basis. Mieszanie jednostek bez zrozumienia kontekstu prowadzi do układów, które psują się przy zmianie rozmiaru okna.<br>
<br>
<br>
<br>
Podsumowując: do linii bazowej służy domyślne baseline, do górnej krawędzi — top. Uważaj na puste znaki między elementami, różnice w line-height i brak linii bazowej w obrazkach. Testuj w przeglądarce z podświetleniem linii bazowej (np. przez tymczasowe tło), bo to najszybszy sposób wychwycenia rozjazdów.<br>
<br>
<br>
<br>
Kiedy linia bazowa psuje układ i jak to naprawić Typowy błąd: dwa elementy inline-block obok siebie, jeden z tekstem, drugi z obrazkiem. Obrazek nie ma linii bazowej, więc przeglądarka traktuje jego dolną krawędź jako linię bazową. Wtedy tekst „opada" względem obrazka. Rozwiązania są dwa: albo ustawić vertical-align: top na obu elementach, albo na obrazku dać vertical-align: middle i wyrównać do środka. Warto też pamiętać, że line-height rodzica wpływa na pozycję linii bazowej — zbyt duża wartość potrafi dodać niechciany odstęp pod elementem.<br>
<br>
<br>
<br>
Osobna kategoria problemów to pliki generowane przez narzędzia. Niektóre zapisują index.html z odwołaniami do modułów i wymagają uruchomienia przez lokalny serwer. Dwuklik pokaże pustą stronę albo błąd w konsoli, mimo że kod jest poprawny. Wtedy trzeba skorzystać z prostego serwera uruchamianego w katalogu projektu — to jedyna różnica między otwarciem pliku a uruchomieniem strony w warunkach zbliżonych do produkcyjnych.<br>
<br>
<br>
<br>
Kiedy width przejmuje kontrolę Gdy flex-basis: auto, przeglądarka sięga po width. To najczęstszy przypadek, bo auto jest wartością domyślną. Wtedy width działa jak rozmiar bazowy, a flex-grow i flex-shrink mogą go później modyfikować. Warto o tym pamiętać, bo wpisanie flex: 1 (co rozwija się do flex: 1 1 0) ustawia flex-basis na 0, więc width przestaje mieć jakiekolwiek znaczenie. To właśnie źródło wielu zdziwień: element ma width: 250px, a i tak kurczy się do zera i rozciąga równo z rodzeństwem.<br>
<br>
<br>
<br>
Praktyczna zasada jest prosta: jeśli chcesz, aby element miał stały rozmiar niezależny od rozmieszczenia, ustaw flex: 0 0 auto i podaj width lub height. Gdy potrzebujesz elastyczności z punktem startowym, użyj flex-basis i nie dubluj go przez width. A jeśli debugujesz layout i nie wiesz, co wygrywa, sprawdź w narzędziach deweloperskich, czy flex-basis nie jest przypadkiem równy 0 — to najczęstsza przyczyna „znikających" szerokości.<br>
<br>
<br>
<br>
Ikony, logotypy, piktogramy i schematy to grafika wektorowa albo obrazy o niewielkiej liczbie kolorów. Najlepiej sprawdza się tu format SVG, który przechowuje opis kształtów, a nie siatkę pikseli. Dzięki temu ikona pozostaje ostra przy każdym powiększeniu i waży kilka kilobajtów. Jeśli SVG jest niemożliwy do użycia, wybierz PNG. Ten format obsługuje przezroczystość i kompresję bezstratną, więc krawędzie ikony nie rozjadą się przy zapisie. Unikaj zapisywania ikon jako JPEG — nawet przy wysokiej jakości wokół kresek pojawią się rozmazane obwódki i szum w jednolitych obszarach.<br>
<br>
<br>
<br>
Najczęstsze błędy powtarzają się w każdym projekcie. Pierwszy to zapisywanie ikon i wykresów jako JPEG, co niszczy ostre krawędzie. Drugi to rozciąganie małego pliku PNG do dużych rozmiarów — piksele się rozjadą, bo brakuje danych. Trzeci to kilkukrotne zapisywanie tego samego zdjęcia w JPEG, które kumuluje zniekształcenia. Czwarty to wrzucanie do sieci plików o rozdzielczości znacznie większej, niż potrzeba, co spowalnia wczytywanie bez widocznej korzyści.<br>
<br>
<br>
<br>
Element w kontenerze flex potrafi nie zmniejszyć się mimo ustawienia flex-shrink na wartość większą od zera. Najczęstszą przyczyną jest minimalny rozmiar, który element sam narzuca. Domyślnie każdy element flex ma właściwość min-width ustawioną na auto. Oznacza to, że przeglądarka nie pozwoli mu zejść poniżej szerokości jego treści — najdłuższego nieprzerwanego słowa, obrazka bez ograniczeń czy szerokości pola formularza. Flex-shrink działa tylko wtedy, gdy element może się faktycznie zmniejszyć, a auto mu to blokuje.<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>
Jest jeszcze jeden niuans: flex-basis działa wzdłuż osi głównej. W kontenerze z flex-direction: row to szerokość, ale przy flex-direction: column — wysokość. Wtedy width przestaje być konkurencją, a jego miejsce zajmuje height. Jeśli więc przenosisz ten sam komponent między układ poziomy i pionowy, musisz sprawdzić, czy flex-basis nie nadpisuje teraz innej właściwości, niż się spodziewasz.