Flex-wrap włączony za późno psuje cały układ strony

Jak liczyć kropki i ukośniki Ścieżka względna opisuje drogę od katalogu bieżącego. Kropka pojedyncza oznacza katalog bieżący, dwie kropki to katalog nadrzędny. Jeśli plik podstrona/index.html ma wskazać na obrazy/logo.png leżące o poziom wyżej, zapis wygląda tak: ../obrazy/logo.png. Gdy plik docelowy leży w tym samym katalogu, wystarczy sama nazwa. Każde zejście w dół to nazwa folderu i ukośnik, każde wyjście w górę to ../. Policz poziomy na kartce albo w drzewie katalogów, zanim wpiszesz cokolwiek do kodu.

Kolejność reguł i podejście mobile first Reguły przechowywanie w małym mieszkaniu CSS działają kaskadowo. Jeśli najpierw napiszesz styl dla szerokiego ekranu, a potem dla wąskiego, ten drugi nadpisze pierwszy tylko wtedy, gdy warunek będzie spełniony. W praktyce wygodniej zacząć od układu dla wąskiego ekranu, a potem dodawać min-width dla coraz szerszych widoków. To podejście mobile first. Dzięki niemu telefon dostaje najprostszy, bazowy styl, a dodatkowe elementy pojawiają się dopiero, gdy jest na nie miejsce. Warto trzymać breakpointy w jednym miejscu i nie mieszać jednostek — raz piksele, raz em — bo przy zmianie rozmiaru czcionki reguły zaczną się rozjeżdżać.

Do sterowania odstępami używaj gap, a nie marginów, bo gap działa między elementami i między liniami. Uwaga na min-width. Jeśli element ma min-width większy niż dostępna szerokość, nie skurczy się i wyjdzie poza kontener. To typowy błąd przy kartach z obrazkiem lub długim słowem, którego przeglądarka nie łamie. Rozwiązaniem jest min-width: 0 na elemencie potomnym oraz overflow-wrap: anywhere na tekście.

Flex-shrink i sztywna szerokość rozwiązują dwa różne problemy, choć na pierwszy rzut oka oba dotyczą rozmiaru elementu. Flex-shrink to właściwość elastyczna: mówi przeglądarce, jak bardzo dany element może się zmniejszyć, gdy w kontenerze flex zabraknie miejsca. Sztywna szerokość, np. width: 300px, ustala rozmiar bazowy i zwykle kończy się konfliktem z rozciągliwym rodzeństwem. W praktyce wybór zależy od tego, czy chcesz, aby element reagował na brak miejsca, czy ma go ignorować.

Na koniec: nie mieszaj flex-wrap: wrap z gridem bez potrzeby i nie licz na to, że wrap naprawi układ bez elastycznych szerokości. Najpierw ustal, co ma się zawijać, potem dobierz basis i minimalne szerokości, a na końcu sprawdź zachowanie przy najdłuższym możliwym tekście. Wtedy elementy przejdą do nowego rzędu dokładnie tam, gdzie tego oczekujesz.

Jak wymusić zawijanie bez psucia proporcji Najpierw ustaw kontener: display: flex oraz flex-wrap: wrap. Następnie zadbaj o szerokość elementów. Jeśli elementy mają width: 100%, żaden nie zmieści się obok drugiego i każdy wyląduje w osobnej linii. Lepiej użyć flex: 1 1 240px, co daje elastyczną podstawę i pozwala elementom rosnąć lub maleć w ramach rzędu. Wartość basis decyduje o punkcie, w którym element przechodzi do nowej linii. Im większa, tym szybciej zawija.

Typowe pomyłki wynikają z mieszania separatorów. W systemach uniksowych działa ukośnik /, w systemie Windows historycznie używano odwrotnego \. W kodzie stron i arkuszy stylów używaj wyłącznie ukośnika zwykłego — odwrotny bywa interpretowany jako znak ucieczki i psuje całą ścieżkę. Uważaj też na wielkość liter: serwery produkcyjne często działają na systemach wrażliwych na wielkość, więc Logo.png i logo.png to dwa różne pliki. Lokalnie na Windows może działać, a po wdrożeniu link przestanie trafiać.

Na koniec: flex-shrink działa tylko w kontenerze flex. W zwykłym przepływie blokowym nie ma znaczenia. Jeśli więc debugujesz układ i flex-shrink nie przynosi efektu, sprawdź, czy rodzic ma display: flex. Sztywna szerokość natomiast działa wszędzie, ale w flexie bywa nadpisywana przez flex-basis. Świadome rozdzielenie tych dwóch mechanizmów pozwala uniknąć zarówno niekontrolowanego kurczenia, jak i niepotrzebnego przewijania.

Jak to sprawdzić bez zgadywania Najprościej przypisz elementom tymczasowo tło i obramowanie, a w narzędziach deweloperskich włącz podgląd układu flex. Zobaczysz wtedy trzy liczby: bazę, wynik po rozdzieleniu wolnego miejsca i rzeczywistą szerokość. Jeśli baza jest inna, niż zakładasz, problem prawie zawsze siedzi w flex-basis auto albo w braku jawnej wartości. Warto też pamiętać, że flex-basis ma pierwszeństwo przed width. Ustawienie width: 200px i flex-basis: auto sprawi, że i tak liczy się width, ale flex-basis: 100px nadpisze tę wartość.

Ścieżka bezwzględna zaczyna się od korzenia systemu plików albo od korzenia witryny. W kontekście strony bezwzględna ścieżka to zapis od ukośnika początkowego, np. /assets/style.css. Działa niezależnie od tego, w jak głębokim podkatalogu znajduje się dokument, który ją wywołuje. Minus jest jeden: jeśli przeniesiesz cały projekt na subdomenę lub do katalogu o innej nazwie, taki link przestanie trafiać we właściwe miejsce. Przy pracy lokalnej ścieżka bezwzględna z literą dysku lub pełnym adresem sieciowym jest jeszcze bardziej krucha.