Fixed czy sticky — która metoda utrzyma nagłówek na ekranie
Uwaga na pułapkę z min-width. Domyślnie element flex ma min-width: auto, co oznacza, że nie może się skurczyć poniżej rozmiaru swojej zawartości. Jeśli w środku siedzi długi, nieprzerwany ciąg znaków albo obrazek o stałej szerokości, element zatrzyma się na tym minimum i zacznie rozpychać kontener. Rozwiązaniem jest min-width: 0 na elemencie flex, który ma się kurczyć poniżej rozmiaru treści. To jedna z najczęściej pomijanych deklaracji przy pracy z flexboxem.<br>
<br>
<br>
<br>
Plik index.html to zwykły plik tekstowy z rozszerzeniem .html, który przeglądarka potrafi zinterpretować jako stronę. Gdy klikniesz go dwukrotnie, system sprawdza skojarzenie rozszerzenia i uruchamia domyślną przeglądarkę, przekazując jej ścieżkę do pliku w postaci adresu lokalnego, zaczynającego się od file://. Nie potrzebujesz do tego serwera ani internetu. Wystarczy edytor tekstu i przeglądarka.<br>
<br>
<br>
<br>
Atrybut alt to tekst, który trafia w miejsce obrazu, gdy ten się nie wczyta, oraz do czytnika ekranu, gdy użytkownik nie widzi grafiki. Nie jest to ozdoba kodu ani pole do wrzucania słów kluczowych. Ma jedno zadanie: przekazać sens obrazu temu, kto go nie odbiera wzrokiem. Jeśli obraz nie niesie żadnej informacji, atrybut alt nadal jest potrzebny — pusty, ale obecny.<br>
<br>
<br>
<br>
Na koniec kilka typowych wpadek. Zapis pliku jako index.html.txt, gdy edytor ukrywa rozszerzenia — wtedy dwuklik otwiera notatnik, a nie przeglądarkę. Używanie polskich znaków w nazwach plików i folderów bywa źródłem problemów na niektórych systemach; lepiej trzymać się prostych nazw bez spacji. I jeszcze jedno: jeśli strona ma działać dla innych, samo kliknięcie z dysku nie wystarczy — potrzebny jest serwer, choćby lokalny. Do własnych testów podwójne kliknięcie jest jednak najszybszym sposobem, by zobaczyć efekt.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
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ść.<br>
<br>
<br>
<br>
Przy zagnieżdżonych siatkach pamiętaj, że jednostka fr działa w kontekście najbliższego kontenera grid. Jeśli wewnątrz kolumny umieścisz kolejny grid z własnymi kolumnami fr, nie dziedziczy on podziału z zewnątrz. To częste źródło zdziwienia, gdy wewnętrzna siatka „nie chce" wyrównać się do zewnętrznej. Rozwiązaniem jest albo jawne ustawienie tych samych proporcji, albo użycie subgrid, jeśli przeglądarki, na których ci zależy, to wspierają.<br>
<br>
<br>
<br>
Kiedy sticky jest lepszym wyborem Sticky sprawdza się, gdy nagłówek ma zostać przyklejony dopiero po przewinięciu pewnego odcinka, a wcześniej normalnie przewijać się razem z treścią. Ustawiasz position: sticky i top: 0, ale element musi mieć przestrzeń do ruchu wewnątrz rodzica. Jeśli rodzic ma overflow: hidden albo auto, sticky przestaje działać — to najczęstsza przyczyna „nie działa, a kod wygląda dobrze". Sprawdź też, czy rodzic nie jest zbyt niski; sticky przykleja się tylko w granicach swojego kontenera i po jego opuszczeniu wraca do zwykłego pozycjonowania. To zachowanie bywa zaletą, gdy chcesz przykleić nagłówek tylko w obrębie jednej sekcji, a nie całej strony.<br>
<br>
<br>
<br>
Na wąskich ekranach nagłówek fixed zajmuje cenne miejsce. Rozważ zmniejszenie jego wysokości po przewinięciu albo ukrycie mniej ważnych elementów. Pamiętaj też o dostępności: przyklejony nagłówek nie może przechwytywać fokusu klawiatury ani zasłaniać treści po skoku do kotwicy. Dodaj scroll-margin-top do celów linków wewnętrznych, żeby po kliknięciu nagłówek nie przykrywał nagłówka sekcji. Testuj na prawdziwym telefonie, nie tylko w zwężonym oknie przeglądarki — różnice w paskach adresu i klawiaturze ekranowej zmieniają zachowanie sticky.<br>
<br>
<br>
<br>
Do diagnozy, dlaczego element się kurczy, użyj narzędzi deweloperskich. Podświetl kontener flex i sprawdź, czy suma baz nie przekracza szerokości rodzica. Zobacz, jakie wartości mają flex-shrink i min-width na poszczególnych elementach. Często wystarczy zmienić jedną z tych dwóch właściwości, aby uzyskać oczekiwany układ bez przepisywania całej struktury.<br>
<br>
<br>
<br>
Kurczenie uruchamia się, gdy suma szerokości bazowej wszystkich elementów w linii przekracza dostępne miejsce. Wtedy przeglądarka zabiera każdemu po trochu, proporcjonalnie do iloczynu flex-shrink i szerokości bazowej. Szersze elementy tracą więcej, ale żaden nie jest chroniony samoistnie. Jeśli w kontenerze są trzy elementy po 400px w wierszu o szerokości 900px, brakuje 300px i wszystkie zostaną ściśnięte — nawet ten, który ma sztywne width.