Gdy brakuje kroju pisma, zadecyduje kolejność w stosie czcionek
Drugi sposób to min-width. Element flex nie skurczy się poniżej swojej minimalnej szerokości, a domyślnie jest to auto — czyli często zero dla elementów bez treści. Ustawienie min-width: 300px zagwarantuje, że element nie zejdzie poniżej tej wartości, nawet przy flex-shrink: 1. To działa też w drugą stronę: jeśli chcesz, by element mógł się kurczyć, ale nie bardziej niż do określonego progu, min-width jest właściwym narzędziem.<br>
<br>
<br>
<br>
Kiedy klasa wygrywa z identyfikator<br>
<br>
<br>
<br>
Typowe błędy wynikają z oszczędzania na liście. Jeden krój bez żadnego zabezpieczenia to najczęstsza przyczyna rozjechanego układu. Drugi błąd to mieszanie rodzin o skrajnie różnej szerokości znaków, np. bardzo wąskiego kroju z szerokim szeryfem — po zamianie tekst może zająć o wiele więcej miejsca i wyjść z kontenera. Trzeci to wpisywanie nazw z literówką, co przeglądarka po cichu pomija. Czwarty to używanie nazw systemowych, które istnieją tylko na jednej platformie, bez żadnego odpowiednika po drugiej stronie.<br>
<br>
<br>
<br>
Uważaj też na flex-shrink. Domyślnie wynosi 1, więc gdy elementy nie mieszczą się w kontenerze, kurczą się proporcjonalnie, zanim flex-grow w ogóle zacznie działać. Jeśli chcesz, aby nadmiar był dzielony bez kurczenia, ustaw flex-shrink: 0 i pozwól, by elementy wychodziły poza kontener albo się zawijały. Pamiętaj, że flex-grow działa tylko wtedy, gdy w kontenerze jest wolne miejsce — przy przepełnieniu nie ma czego dzielić.<br>
<br>
<br>
<br>
Mechanizm jest prosty: każdy element dostaje część wolnej przestrzeni równą swojemu flex-grow podzielonemu przez sumę flex-grow wszystkich elementów. Przy wartościach 1, 2 i 1 element środkowy otrzyma połowę wolnej przestrzeni, a skrajne po jednej czwartej. W praktyce nie oznacza to, że środkowy będzie dwa razy szerszy od pozostałych — będzie szerszy tylko o przydzieloną resztę, czyli np. o 150 px zamiast o 75 px.<br>
<br>
<br>
<br>
Typowy błąd to poleganie wyłącznie na width bez sprawdzenia, czy element nie jest przypadkiem elementem flex. Wiele osób ustawia width: 200px i dziwi się, że po dodaniu kilku elementów obok siebie szerokość się zmienia. Warto wtedy zajrzeć do inspektora i sprawdzić obliczoną wartość flex-shrink. Inny częsty problem to kontener z flex-wrap: nowrap — wtedy elementy nigdy nie przejdą do nowej linii, więc będą się kurczyć bez końca, aż do osiągnięcia min-width lub zera.<br>
<br>
<br>
<br>
Kontener flex rozdziela wolną przestrzeń między elementy proporcjonalnie do ich współczynnika flex-shrink i szerokości bazowej. Jeśli suma szerokości bazowej przekracza dostępne miejsce, nadwyżka jest odejmowana od każdego elementu. Element z większą szerokością bazową straci proporcjonalnie więcej pikseli. Efekt bywa zaskakujący: wąski element może w ogóle nie ucierpieć, a szeroki skurczy się mocno, mimo że miał sztywne width.<br>
<br>
<br>
<br>
Gdzie najczęściej popełnia się błąd Pierwszy typowy problem to brak zdefiniowanego flex-basis. Gdy go pominiesz, przeglądarka przyjmuje zawartość elementu jako podstawę, a wtedy podział wolnej przestrzeni bywa nieprzewidywalny. Ustaw flex-basis jawnie, choćby na 0, jeśli chcesz, aby proporcje wynikały wyłącznie z flex-grow. Drugi błąd to dodanie flex-grow do elementów, które mają sztywne width. Wartość width nadal działa jako ograniczenie, ale może zablokować rozciąganie i wolna przestrzeń zostanie niewykorzystana.<br>
<br>
<br>
<br>
Kontrola stosu to nie formalność, lecz część projektowania typografii. Każda rodzina w liście powinna być świadomą decyzją, a nie przypadkowym dodatkiem. Gdy tekst wygląda dobrze na maszynie autora i równie dobrze po wymuszeniu braku pierwszego kroju, stos jest gotowy. W przeciwnym razie strona oddaje wygląd w ręce przeglądarki i systemu, a wtedy o spójności nie ma co mówić.<br>
<br>
<br>
<br>
Pamiętaj też o różnicy między flex-basis a width. Gdy oba są ustawione, flex-basis ma pierwszeństwo w obliczeniach flexbox, chyba że jest ustawione na auto. W praktyce najbezpieczniej używać flex: 0 0 300px — to skrót oznaczający brak rozciągania, brak kurczenia i bazę 300px. Taki zapis jest czytelny i od razu mówi, że element ma stałą szerokość. Jeśli jednak zależy ci na responsywności, lepiej zostawić możliwość kurczenia i zadbać o sensowne min-width oraz zawijanie wierszy.<br>
<br>
<br>
<br>
Przeglądarka nie zgaduje, jak wygląda krój, którego nie ma na dysku. Dla każdego elementu tekstowego czyta listę rodzin podanych w font-family od lewej do prawej i używa pierwszej, która jest dostępna. Jeśli żadnej nie znajdzie, sięga po domyślną czcionkę przeglądarki — najczęściej szeryfową, ustawioną niezależnie od tego, co zaplanował autor strony. Dlatego losowy tekst w projekcie zwykle oznacza, że stos czcionek był zbyt krótki albo oparty na jednej rodzinie, którą ma tylko część użytkowników.<br>
<br>
<br>
<br>
Ustawiasz elementowi width: 300px albo flex-basis: 300px, a on i tak się kurczy. To nie błąd przeglądarki, tylko podstawowe działanie modelu flexbox. Domyślna wartość flex-shrink wynosi 1, co oznacza, że każdy element wewnątrz kontenera flex może zostać zmniejszony, gdy w rzędzie brakuje miejsca. Szerokość bazowa to tylko punkt wyjścia do obliczeń, a nie twardy limit.