Gdy nagłówki w article i section psują strukturę dokumentu
Hierarchia to nie dekoracja Poziomy nagłówków wynikają z zagnieżdżenia, a nie z rozmiaru czcionki. Jeśli sekcja nadrzędna ma h2, to sekcja w niej zagnieżdżona zaczyna się od h3, a article wewnątrz niej od h4. Przeskakiwanie z h2 na h4 psuje strukturę dokumentu: czytniki ekranu i narzędzia audytowe widzą lukę, której nie da się sensownie zinterpretować. Nie da się też naprawić hierarchii za pomocą CSS, bo stylowanie nie zmienia znaczenia.<br>
<br>
<br>
<br>
Na koniec praktyczna zasada: projektując układ, najpierw ustal, co jest stałe — odstępy, padding, stałe kolumny — a dopiero potem rozdzielaj resztę jednostkami fr. Testuj przy skrajnie długiej i skrajnie krótkiej treści, bo właśnie wtedy wychodzą błędy w proporcjach. Nie licz szerokości ręcznie w kalkulatorze, skoro grid robi to za ciebie. I pamiętaj, że fr to nie procent — to udział w tym, co zostało po odjęciu wszystkiego innego.<br>
<br>
<br>
<br>
Wiersze, komórki i atrybuty, które porządkują ukł<br>
<br>
<br>
<br>
Flex-basis w procentach nie uwzględnia automatycznie odstępów. Jeśli ustawisz dwóm elementom flex: 0 0 50% i dodasz gap: 16px, suma przekroczy szerokość rodzica i elementy się zawiną albo zaczną się ściskać. Rozwiązanie: albo policz szerokość z uwzględnieniem gap, np. flex-basis: calc(50% - 8px) przy jednym odstępie, albo użyj flex: 1 1 0 i pozwól przeglądarce rozdzielić wolną przestrzeń. Pamiętaj też, że padding i border zwiększają rozmiar elementu, jeśli nie ustawisz box-sizing: border-box. Wtedy 50% plus padding daje więcej niż połowę rodzica i układ się rozjeżdża.<br>
<br>
<br>
<br>
Elementy article i section wyglądają podobnie, ale odpowiadają na inne pytania. Article to samodzielna całość, która ma sens także po wyjęciu z kontekstu strony: wpis, komentarz, karta produktu, pojedyncza wiadomość. Section to wyodrębniona część większej całości, która bez kontekstu traci sens: rozdział, zakładka, grupa pytań w FAQ. Od tej różnicy zależy wszystko, co dzieje się później z nagłówkami.<br>
<br>
<br>
<br>
Najczęstszy błąd to tworzenie section dla samej semantyki, bez treści i bez nagłówka. Drugi to wrzucanie wielu article do jednego section i nadawanie im tego samego poziomu nagłówka, co sekcji nadrzędnej. Trzeci to używanie h1 w każdym article na stronie listingu — wtedy dokument ma kilkanaście tytułów głównych i żaden nie jest tym najważniejszym. Czwarty to traktowanie nagłówków jako elementów wizualnych: jeśli potrzebny jest wyróżniony tekst, wystarczy akapit ze stylem.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
Drugi krok to zrozumienie osi głównej. Domyślnie flex-direction ma wartość row, więc oś główna biegnie poziomo — od lewej do prawej. Elementy układają się wzdłuż niej jeden za drugim. Oś poprzeczna jest wtedy pionowa. Gdy zmienisz flex-direction na column, osie zamieniają się rolami: główna biegnie z góry na dół, a poprzeczna poziomo. To nie jest kosmetyka — od tego zależy, jak działają justify-content i align-items. justify-content wyrównuje elementy wzdłuż osi głównej, align-items — wzdłuż poprzecznej. Pomylenie tych osi to klasyczny powód, dlaczego coś „nie chce się wyśrodkować".<br>
<br>
<br>
<br>
Dobry alt to nawyk. Przechodząc do publikacji, sprawdź każdy obraz: czy ma alt? Czy ten alt mówi, co trzeba wiedzieć, gdy obrazu nie widać? Czy nie jest zbyt długi lub zbyt krótki? Czy nie powtarza sąsiedniego tekstu? Odpowiedzi „tak" na te pytania oznaczają, że robisz to dobrze.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
Praktyczna kolejność pracy wygląda tak: najpierw ustal, które fragmenty są samodzielne i oznacz je jako article, a dopiero potem dziel pozostałą treść na sekcje. Każdemu elementowi nadaj nagłówek i sprawdź, czy po zdjęciu zagnieżdżenia nadal wiadomo, czego dotyczy. Na koniec prześledź całą stronę od góry do dołu i zobacz, czy poziomy nagłówków tworzą ciąg bez luk. Jeśli tak, struktura dokumentu jest poprawna — niezależnie od tego, jak wygląda w przeglądarce.