Gdy flex-shrink nie kurczy elementu, sprawdź ten warunek

2026-10-19T09:51:23Z

NydiaJessep3: Utworzono nową stronę "Typowy błąd to dodawanie flex-shrink: 0, żeby „naprawić" układ, gdy element się rozjeżdża. To działa odwrotnie — element przestaje się kurczyć na stałe i zaczyna wypychać sąsiadów. Inny błąd to ustawianie flex: 1 bez min-width: 0. Skrót flex: 1 ustawia flex-shrink na 1, ale nie zmienia min-width, więc element nadal może mieć dolną granicę wynikającą z treści. Zapis flex: 1 1 0 plus min-width: 0 to najbezpieczniejszy zestaw do równomie…"

Typowy błąd to dodawanie flex-shrink: 0, żeby „naprawić" układ, gdy element się rozjeżdża. To działa odwrotnie — element przestaje się kurczyć na stałe i zaczyna wypychać sąsiadów. Inny błąd to ustawianie flex: 1 bez min-width: 0. Skrót flex: 1 ustawia flex-shrink na 1, ale nie zmienia min-width, więc element nadal może mieć dolną granicę wynikającą z treści. Zapis flex: 1 1 0 plus min-width: 0 to najbezpieczniejszy zestaw do równomiernego kurczenia. Jak potwierdzić wybór bez narzędzi deweloperskich Gdy nie chcesz grzebać w konsoli, zrób test porównawczy. Przygotuj krótki tekst i ustaw dla niego stos czcionek. Następnie tymczasowo zmień kolejność: jeśli po zamianie wygląd się nie zmienia, prawdopodobnie pierwsza czcionka i tak nie była dostępna. Inny sposób to użycie jednostek względnych, np. ex lub ch, i zmierzenie szerokości znaku. Różne kroje mają różne proporcje, więc szerokość zdradzi, która czcionka została użyta. Wystarczy porównać wynik z wartością uzyskaną po wymuszeniu konkretnej czcionki przez font-family z jedną pozycją. Wybór między listą numerowaną, punktowaną i definicji nie jest kwestią estetyki, a logiki przekazu. Każda z nich odpowiada na inne pytanie czytelnika. Lista numerowana mówi: „w jakiej kolejności". Punktowana: „co się na to składa". Definicji: „co to właściwie znaczy". Jeśli pomylisz te role, odbiorca zgubi się w treści, nawet gdy zdania będą poprawne. 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. Efekt widać najczęściej tam, gdzie spodziewasz się konkretnej przerwy. Akapit z marginesem dolnym 20 pikseli, po którym następuje lista z marginesem górnym 30 pikseli, daje przerwę 30 pikseli. Nagłówek z odstępem 40 pikseli nad i akapit z odstępem 15 pod nim dzieli od siebie 40 pikseli, więc wizualnie nagłówek przykleja się do poprzedniej treści. Zmniejszanie jednej z wartości nic nie da, dopóki druga jest większa. Najprostsza metoda to inspekcja elementu. Otwórz narzędzia deweloperskie, kliknij prawym przyciskiem na tekst i wybierz opcję badania elementu. W zakładce stylów znajdź regułę font-family. Przeglądarka pokazuje tam listę, ale nie wskazuje aktywnej pozycji. W panelu „Computed" (obliczone) znajdziesz pole font-family z wyliczoną wartością — to zwykle cały stos, a nie pojedyncza nazwa. Dopiero w narzędziu „Rendering" (renderowanie) w nowszych przeglądarkach widać „Fonts used" albo podświetlenie czcionek, które faktycznie zostały użyte do wyświetlenia tekstu. Największy problem pojawia się, gdy lista udaje akapit. Pięć krótkich punktów zamiast jednego zdania to czytelnicza zgadywanka. Zanim cokolwiek wypunktujesz, zapisz to jako zwykłe zdanie. Jeśli brzmi naturalnie, zostaw akapit. Jeśli się gubi, podziel treść na punkty. Trzymaj też jedną zasadę: lista musi mieć wprowadzenie w zdaniu poprzedzającym — czytelnik powinien wiedzieć, czego dotyczy wyliczenie, zanim do niego dotrze. Typowy błąd to poleganie na nazwie z systemu. Czcionka może być zainstalowana, ale pod inną nazwą lokalną, albo przeglądarka może ją blokować ze względów bezpieczeństwa. Kolejny problem to czcionki webowe ładowane asynchronicznie — zanim się pobiorą, tekst wyświetla się czcionką zastępczą. Warto ustawić font-display: swap i sprawdzić, czy po chwili wygląd się zmienia. Jeśli tak, początkowe renderowanie szło z fallbacku. Listę numerowaną stosuj wtedy, gdy kolejność ma znaczenie. Kroki instalacji, etapy procedury, ranking od najważniejszego do najmniej istotnego, sekwencja zdarzeń — wszystko, co traci sens po przestawieniu. Pisz krótko: jedno działanie na punkt, zaczynaj od czasownika („Zapisz plik", „Zamknij program"). Typowy błąd to wrzucanie do numeracji rzeczy równorzędnych, które nie tworzą sekwencji. Wtedy czytelnik szuka logiki, której nie ma, i traci zaufanie do instrukcji. Na koniec rzecz o długości. Lista dłuższa niż siedem punktów przestaje porządkować, a zaczyna męczyć. Podziel ją wtedy na mniejsze bloki z własnymi śródtytułami. Interpunkcja też ma znaczenie: po punktach będących równoważnikami zdania nie stawiamy kropki, a po pełnych zdaniach — tak. Spójność w tym zakresie robi więcej dla czytelności niż kolorowe ikony i pogrubienia. Przeglądarka nie mówi wprost, którą czcionkę wybrała ze stosu. Kaskada font-family działa po cichu: jeśli pierwsza pozycja jest niedostępna, system sięga po następną, a gdy żadna nie pasuje, używa domyślnej. Aby to sprawdzić, trzeba zajrzeć w narzędzia deweloperskie albo porównać wygląd tekstu z próbkami.

Użytkownik:NydiaJessep3

2026-10-19T09:51:22Z

NydiaJessep3: Utworzono nową stronę "Miłośnik aranżacji wnętrz z wieloletnią praktyką. Piszę o tym, jak urządzić mieszkanie w bloku bez remontu generalnego. Najchętniej opisuję proste rozwiązania, które da się zrobić samemu."

Miłośnik aranżacji wnętrz z wieloletnią praktyką. Piszę o tym, jak urządzić mieszkanie w bloku bez remontu generalnego. Najchętniej opisuję proste rozwiązania, które da się zrobić samemu.

Mazovia - Wkład użytkownika [pl]

Gdy flex-shrink nie kurczy elementu, sprawdź ten warunek

Użytkownik:NydiaJessep3