Zanim ustawisz display: flex, sprawdź, czym jest oś główna

Druga pułapka to style inline i deklaracje z flagą ważności. Atrybut stylu w znaczniku ma wyższy priorytet niż zwykłe reguły z arkusza, więc żadne przestawianie linii go nie przebije. Flaga ważności działa jeszcze mocniej i potrafi zablokować całą kaskadę. Używaj jej oszczędnie, najlepiej wcale, bo później nie pamiętasz, która reguła faktycznie rządzi. Jeśli musisz nadpisać inline, zrób to świadomie i skomentuj w kodzie, żeby następna osoba nie straciła godziny na szukanie przyczyny.

Trzecia pułapka to media queries i stany. Reguły w zapytaniach o media nie mają automatycznie większej wagi — liczy się ich pozycja względem reszty. Jeśli umieścisz je przed stylami bazowymi, te drugie mogą je nadpisać przy spełnionym warunku. Podobnie jest z pseudoklasami, na przykład stanem najechania kursorem. Kolejność ma znaczenie również wtedy, gdy warunek jest aktywny. Praktyczny nawyk: najpierw style ogólne, potem stany, a na końcu zapytania o media. Dzięki temu późniejsza linia rzeczywiście robi to, czego oczekujesz.

Co się psuje, gdy brakuje tej linii Bez deklaracji viewport telefon przyjmuje domyślną szerokość układu, często około 980 pikseli, i skaluje całość tak, by zmieściła się na ekranie. Strona wygląda jak miniaturka: nagłówki są czytelne dopiero po zbliżeniu, a użytkownik musi przesuwać widok w dwóch kierunkach. Media queries oparte na szerokości ekranu nie zadziałają zgodnie z zamiarem, bo przeglądarka nadal widzi szeroki layout. Efekt jest szczególnie widoczny na formularzach — pola i przyciski stają się zbyt małe do wygodnego wypełniania.

Gdy w arkuszu stylów podajesz font-family: "Moja Czcionka", Arial, sans-serif, przeglądarka nie traktuje tej listy jako propozycji do wyboru. Czyta ją od lewej do prawej i używa pierwszego kroju, który jest dostępny w systemie użytkownika. Jeśli "Moja Czcionka" nie została pobrana przez @font-face ani nie jest zainstalowana lokalnie, następuje ciche przejście do kolejnego elementu stosu. Problem w tym, że wizualnie dzieje się to bez ostrzeżenia, a layout potrafi się rozjechać, bo inne kroje mają odmienne proporcje znaków.

Testuj stos, wyłączając kolejne kroje w narzędziach deweloperskich. Sprawdź, czy po podmianie na zapasowy tekst nadal mieści się w kontenerze, czy nagłówki nie łamią się na trzy linie i czy przyciski nie tracą czytelności. Zwróć uwagę na wysokość x, grubość i szerokość znaków — krój zapasowy o węższym kroju potrafi rozsypać siatkę, a szerszy wywoła poziomy pasek przewijania. Ustaw też jawnie line-height i font-size, zamiast liczyć, że wszystko wyrówna się samo.

Na koniec kilka zasad, które oszczędzają czas. Po pierwsze, testuj w przeglądarce z podświetlaniem flexa — narzędzia deweloperskie pokazują osie i rozmiary. Po drugie, nie ustawiaj szerokości na sztywno, jeśli używasz flex-grow; lepiej operować na proporcjach. Po trzecie, pamiętaj, że Flexbox działa tylko w obrębie jednego wymiaru — albo rząd, albo kolumna. Jeśli potrzebujesz układu dwuwymiarowego, sięgnij po Grid. I wreszcie: nie bój się eksperymentować na małym przykładzie, zanim wdrożysz flexa do całego layoutu. Zrozumienie osi głównej to połowa sukcesu.

Kaskada to mechanizm, w którym przeglądarka rozstrzyga konflikt między regułami. Gdy dwie reguły pasują do tego samego elementu i mają taką samą wagę, wygrywa ta, która pojawia się później w źródle. To brzmi banalnie, dopóki nie zobaczysz, jak łatwo odwrócić tę kolejność przez przypadek. Wystarczy dopisać nowy styl na końcu arkusza, dołączyć plik z importem w złym miejscu albo użyć selektora o tej samej specyficzności w innym pliku — i nagle „popsuty" układ okazuje się skutkiem kolejności, a nie złego kodu.

Jak sobie radzić w praktyce? Ustal jedną kolejność i się jej trzymaj: reset, typografia, układ, komponenty, nadpisania. Grupuj reguły dla tego samego elementu w jednym miejscu, zamiast rozrzucać je po pliku. Gdy coś nie działa, sprawdź w narzędziach deweloperskich, która deklaracja została przekreślona i dlaczego. Zamiast dodawać kolejną linię na końcu, usuń źródło konfliktu. Kaskada nie jest wrogiem — jest narzędziem, które nagradza przewidywalność i porządek.

Jak nie zgubić się w osiach i rozmiarach Praktyczna rada: zawsze najpierw ustal flex-direction, a dopiero potem dobieraj wyrównanie. Jeśli chcesz wyśrodkować element w poziomie i pionie, użyj justify-content: center i align-items: center przy domyślnym row. Gdy zmienisz na column, te same wartości dadzą odwrotny efekt — justify-content zadziała w pionie, a align-items w poziomie. Kolejna pułapka to flex-basis, flex-grow i flex-shrink. Domyślnie elementy mają flex: 0 1 auto, co oznacza, że nie rosną, mogą się kurczyć i mają rozmiar wynikający z zawartości. Jeśli chcesz, aby elementy równo się rozciągały, ustaw flex: 1. Pamiętaj jednak, że flex: 1 to skrót od flex-grow: 1, flex-shrink: 1 i flex-basis: 0%. To zero na końcu bywa zaskakujące: element z flex: 1 ignoruje swoją domyślną szerokość i dzieli przestrzeń po równo.