Kaskada, o której większość zapomina, czyli dlaczego twój styl nie działa

W praktyce najczęstszy błąd polega na tym, że ktoś ustawia oba rozmiary i liczy na ich sumę albo na to, że jeden „nadpisze" drugi w sposób intuicyjny. Tymczasem mechanizm jest taki: flex-basis decyduje o punkcie startowym podziału, a width staje się wartością odniesienia dla rozmiaru bazowego, gdy podstawa wynosi auto. Dodatkowo min-width i max-width potrafią przyciąć wynik końcowy, nawet jeśli podstawa była inna. Warto o tym pamiętać, gdy element zachowuje się inaczej, niż sugerowałaby sama wartość width.

Gdy chcesz, aby element miał stały start i rósł proporcjonalnie, ustaw flex: 1 1 200px. Pierwsza liczba to współczynnik rozrastania, druga — kurczenia, trzecia — podstawa. Taki zapis jest czytelniejszy niż mieszanie width z flex-basis, bo od razu widać, jak element zachowa się przy niedoborze i nadmiarze miejsca. Jeśli natomiast element ma po prostu mieć określoną szerokość i się nie rozciągać, użyj flex: 0 0 auto razem z width — wtedy podstawa pochodzi właśnie z width.

Podsumowując: flex-basis nie „nadpisuje" width na stałe, tylko przejmuje rolę punktu startowego wtedy, gdy ma wartość różną od auto. width wraca do gry przy auto oraz jako ograniczenie końcowe. Najbezpieczniejsze podejście to ustawiać albo flex-basis, albo width — nie oba naraz bez wyraźnego powodu — i sprawdzać efekt przy różnych długościach treści oraz szerokościach kontenera.

If you liked this information and you would certainly such as to receive additional details concerning Lebenskunst.Berlin kindly go to our own site. W flexboxie szerokość elementu nie wynika z jednej właściwości, lecz z decyzji, którą podejmuje przeglądarka na podstawie kilku wartości. width opisuje docelowy rozmiar pudełka, a flex-basis mówi, od jakiej wartości ma startować podział wolnego miejsca w kontenerze. Dopóki element nie jest elementem flex, flex-basis nie robi nic — działa tylko wtedy, gdy rodzic ma display: flex lub display: inline-flex.

Najczęstsze błędy, które psują odbiór Do typowych wpadek należy wpisywanie nazwy pliku, np. „IMG_2043.jpg". Czytnik odczyta to jako ciąg znaków bez sensu. Drugi błąd to powtarzanie treści, która stoi obok obrazu — wtedy użytkownik słyszy to samo dwa razy. Kolejny to wrzucanie do alta słów kluczowych dla wyszukiwarki, co psuje opis i bywa odbierane jako spam. Zdarza się też nadmiar: alt na pół ekranu, zamiast jednego zwięzłego zdania. I odwrotnie — zbyt ogólnikowe „zdjęcie" nic nie wnosi.

auto-fill kontra auto-fit: różnica, która psuje układ auto-fill zostawia puste tory, gdy kart jest mniej niż miejsca. auto-fit je zwija, więc ostatnia karta rozciąga się na całą szerokość. Jeśli chcesz, żeby trzy karty nie rozjeżdżały się na pół ekranu, wybierz auto-fill. Jeśli wolisz, żeby przy jednej karcie wypełniła ona cały rząd, użyj auto-fit. To najczęstsze źródło zdziwienia: ktoś kopiuje auto-fit, a potem dziwi się, że pojedynczy element zajmuje całą stronę.

Drugi typowy błąd to zbyt duża wartość minimalna. minmax(400px, 1fr) na telefonie o szerokości 360px wymusi jedną kolumnę szerszą niż ekran i pojawi się poziome przewijanie. Wartość minimalna musi być mniejsza niż najwęższy realny viewport, na którym strona ma działać. Bezpieczny zakres to zwykle 200–280px. Pamiętaj też, że grid nie skaluje obrazków ani tekstu wewnątrz karty — jeśli treść nie ma width: 100% i overflow, karta pęknie niezależnie od siatki.

Uwaga na pułapkę z flex-basis: 0. Wartość zero jest poprawna i oznacza, że o rozmiarze decyduje wyłącznie podział wolnego miejsca. Różni się to od flex-basis: auto, gdzie punktem wyjścia jest rozmiar treści lub width. Mylenie tych dwóch przypadków prowadzi do layoutów, w których kolumny wyglądają dobrze przy krótkiej treści, a rozjeżdżają się przy długiej. Testuj więc układ z tekstem dłuższym i krótszym niż spodziewany.

Kolejność, mieszkanie w bloku jakiej przeglądarka czyta rozmiary Najpierw ustalana jest podstawa (flex basis). Jeśli flex-basis ma wartość inną niż auto, to ona wygrywa z width. Dopiero gdy flex-basis: auto, przeglądarka sięga po width, a gdy i tego brak — po rozmiar treści. Dlatego element z width: 300px i flex-basis: 100px zacznie od stu pikselów, a nie od trzystu. Wartość width nie znika jednak całkowicie: nadal działa jako ograniczenie, gdy w podziale miejsca dojdzie do rozciągania lub kurczenia.

Ostatnia pułapka to odstępy. Gap działa świetnie, ale przy auto-fill wiersze z jedną kartą zostawiają puste tory, które nie znikają. Jeśli to przeszkadza, dodaj justify-content: przechowywanie w małym mieszkaniu center lub zamień na auto-fit. Sprawdź układ przy 320px, 768px i 1440px bez zmiany kodu — jeśli karty nie wychodzą za ekran i nie zostawiają jednej samotnej na końcu, siatka działa. Wtedy media query do szerokości kolumn przestają być potrzebne.

Osobna pułapka to obrazy pełniące funkcję przycisku lub odnośnika. Jeśli kliknięcie w ikonę przenosi do innej sekcji, alt musi opisywać cel, np. „przejdź do formularza kontaktowego". Wtedy nie opisuj wyglądu ikony, tylko jej zadanie. Przy obrazach z tekstem, np. plakatach, alt powinien zawierać ten sam tekst, bo inaczej treść przepadnie dla osób, które go nie widzą.