Flex shrink a szerokość bazowa: kiedy element naprawdę się kurczy
Typowe błędy pojawiają się na etapie przygotowania pliku. Rozciąganie rastra w programie graficznym do docelowego rozmiaru przed wysłaniem do drukarni to najczęstsza pomyłka: lepiej dostarczyć mniejszy plik o gęstej siatce i pozwolić zakładowi przeskalować go według własnych kryteriów. Drugi błąd to konwersja rastra na wektor za pomocą automatycznego narzędzia i brak kontroli efektu. Wektoryzacja zdjęcia generuje tysiące przypadkowych kształtów, które wyglądają źle i ważą więcej niż oryginał. Trzeci błąd to zapisywanie grafiki wektorowej jako rastra na wczesnym etapie pracy, co bezpowrotnie odbiera możliwość skalowania. Kolejność jest prosta: najpierw ustal docelowy rozmiar i technikę druku, potem wybierz typ obrazu, a na końcu dopasuj rozdzielczość.<br>
<br>
<br>
<br>
Kiedy inline psuje układ, a kiedy pomaga Elementy inline, takie jak span, a, strong czy em, nie łamią linii. Zajmują dokładnie tyle miejsca, ile wynika z ich treści. Nie ustawisz im width ani height, a padding pionowy nachodzi na sąsiednie linie, nie przesuwając ich. Marginesy działają tylko w poziomie. To częste źródło frustracji: ktoś dodaje padding do linku, wygląda dobrze w jednej linii, a przy zawijaniu tekstu nachodzi na akapit powyżej. Rozwiązaniem jest zmiana display na inline-block albo block.<br>
<br>
<br>
<br>
Kolejny typowy problem to mieszanie flex-basis z width. Gdy podajesz oba, przeglądarka w niektórych sytuacjach bierze pod uwagę flex-basis, a width traktuje jako wartość zapasową. Jeśli chcesz mieć pełną kontrolę, używaj wyłącznie flex-basis w skrócie flex, np. flex: 0 1 300px. Wtedy od razu widać, czy element może rosnąć, czy może się kurczyć i jaka jest jego baza.<br>
<br>
<br>
<br>
Element z ustawioną szerokością bazową potrafi się skurczyć, gdy w kontenerze flex brakuje miejsca na wszystkie elementy razem. Wartość flex-shrink domyślnie wynosi 1, więc przeglądarka może pomniejszyć każdy element, nawet jeśli w regule CSS widnieje width: 300px. Szerokość bazowa to punkt startowy, a nie gwarancja końcowego rozmiaru.<br>
<br>
<br>
<br>
Inline-block to hybryda. Element nadal ustawia się w linii z innymi, ale zyskuje możliwość ustawiania width, height, margin i padding bez rozrywania układu. Świetnie sprawdza się przy przyciskach, kartach czy elementach nawigacji, które mają stały rozmiar, ale mają stać obok siebie. Uwaga na whitespace w kodzie HTML — spacja między elementami inline-block tworzy dodatkowy odstęp. Można go usunąć, pisząc znaczniki bez odstępu, komentując go albo ustawiając font-size: 0 na rodzicu i przywracając go na dzieciach.<br>
<br>
<br>
<br>
Każdy obraz cyfrowy powstaje w jednej z dwóch technologii: rastrowej albo wektorowej. Różnica nie sprowadza się do estetyki ani formatu pliku. Chodzi o sposób zapisu informacji, a to bezpośrednio przekłada się na to, jak obraz zachowa się przy powiększaniu. Zrozumienie tej różnicy pozwala uniknąć sytuacji, w której plik wygląda dobrze na ekranie, a po wydruku na wielkim formacie zamienia się w rozmytą plamę.<br>
<br>
<br>
<br>
Flexbox działa w dwóch etapach. Najpierw liczy rozmiary bazowe elementów — z flex-basis, a jeśli go nie ma, z width lub height albo z rozmiaru treści. Potem sprawdza, ile wolnej przestrzeni zostało w kontenerze. Dopiero w tym momencie uruchamia flex-grow i proporcjonalnie rozdziela nadwyżkę. Kiedy nadwyżki nie ma, etap drugi nie ma czego rozdzielać. To nie błąd przeglądarki, tylko kolejność działania algorytmu.<br>
<br>
<br>
<br>
Jak ustawić pion bez zgadywania Do dyspozycji masz właściwość vertical-align. Wartość baseline to domyślne zachowanie i właśnie ona odpowiada za większość niespodzianek. Wartości top i bottom wyrównują do górnej i dolnej krawędzi wiersza, middle ustawia środek elementu na linii bazowej powiększonej o połowę wysokości x, a text-top i text-bottom wiążą element z krawędziami fontu. Gdy potrzebujesz idealnie równych górnych krawędzi, ustaw wszystkim elementom w wierszu vertical-align: top i zadbaj, żeby rodzic nie miał większej wysokości linii niż one same.<br>
<br>
<br>
<br>
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>
Nie istnieje uniwersalnie lepszy format. Raster wygrywa przy fotografiach, teksturach i miękkich przejściach tonalnych. Wektor wygrywa wszędzie tam, gdzie liczy się ostrość krawędzi i elastyczność rozmiaru. Świadomy wybór na starcie oszczędza godziny poprawek i ratuje projekty, które inaczej trafiłyby do kosza po pierwszym wydruku próbnym.<br>
<br>
<br>
<br>
Na koniec: nie ufaj automatycznym optymalizatorom, które „bezstratnie" zmniejszają rozmiar. Część z nich stosuje agresywne kwantyzacje, które psują krawędzie. Zawsze sprawdź wynikowy plik w powiększeniu, zanim go opublikujesz. Jeśli zależy Ci na jakości, wybierz format bezstratny dla grafiki z ostrymi elementami, a JPEG zostaw dla zdjęć, gdzie naturalne przejścia tonalne maskują drobne artefakty.