Flexbox: błąd z osią główną, który psuje cały układ
Kluczowa rzecz: flex-basis działa tylko na bezpośrednich dzieciach kontenera flex. Jeśli ustawisz procent na wnuku, który nie jest elementem flex, nic się nie stanie. Drugi warunek: rodzic musi mieć określoną szerokość lub wysokość, bo procent z niczego nie policzy się poprawnie. Gdy rodzic jest elementem inline, ma width: auto albo jego rozmiar zależy tylko od zawartości, procent może zostać zignorowany lub policzony w nieprzewidywalny sposób. Najprostsze zabezpieczenie to nadanie rodzicowi konkretnej szerokości, max-width albo display: flex z określonym rozmiarem.<br>
<br>
<br>
<br>
Znaczniki article i section w HTML5 służą do grupowania treści, ale mają różne zastosowania. Wybór niewłaściwego z nich prowadzi do bałaganu w strukturze dokumentu i problemów z dostępnością. Poniżej wyjaśniam, czym się różnią, jak je stosować i jakie błędy popełnia się najczęściej.<br>
<br>
<br>
<br>
Zanim dotkniesz jakiejkolwiek właściwości, sprawdź, w którą stronę biegnie oś główna. Wypisz sobie w myślach: flex-direction ustawia kierunek, justify-content rozdaje miejsce wzdłuż niego, align-items wyrównuje w poprzek. Gdy to rozdzielisz, przestaniesz zgadywać. Wartości typu flex-start, center, space-between mają sens tylko w kontekście tej osi. Ta sama wartość daje inny efekt przy row i przy column.<br>
<br>
<br>
<br>
Specyficzność to waga przypisana selektorowi. Selektor typu (np. div, p, span) ma wagę 1. Klasa, atrybut i pseudoklasa (np. .menu, [type="text"], :hover) mają wagę 10. Identyfikator ma wagę 100. Styl wpisany bezpośrednio w atrybucie style ma wagę 1000. Selektor uniwersalny, kombinator i pseudoelement nie dodają nic. Gdy łączysz selektory, sumujesz ich wagi — ale nie w systemie dziesiętnym, tylko pozycyjnym: 10 klas nigdy nie przebije jednego identyfikatora.<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>
Oś główna decyduje o wszystkim Oś główna to kierunek, w którym układają się elementy. Domyślnie flex-direction: row oznacza poziom, a justify-content działa wzdłuż tej osi, czyli w poziomie. align-items odpowiada za oś poprzeczną, więc w tym przypadku za pion. Zmiana na column odwraca te role: justify-content zaczyna działać w pionie, a align-items w poziomie. To najczęstsza pułapka — ktoś ustawia align-items: center i dziwi się, że element nie jest wyśrodkowany poziomo, choć właśnie tego oczekiwał.<br>
<br>
<br>
<br>
Typowe błędy? Używanie section jako zamiennika div dla stylowania — to nadużycie. Drugi błąd to wstawianie article wewnątrz innego article bez sensu (np. dla zwykłego akapitu). Zagnieżdżanie jest poprawne, gdy np. komentarz pod postem jest osobnym article wewnątrz głównego article. Trzeci błąd: brak nagłówków w section — to psuje strukturę dokumentu.<br>
<br>
<br>
<br>
Najczęstszy błąd to zła nazwa. System może dopisać ukryte rozszerzenie i plik nazywa się w rzeczywistości index.html.txt. Sprawdź nazwę w oknie właściwości albo włącz wyświetlanie rozszerzeń w menedżerze plików. Druga pułapka to kodowanie znaków — jeśli w pliku są polskie litery, a zapisano go w innym kodowaniu niż zadeklarowane w nagłówku, strona pokaże krzaki. Zapisuj w UTF-8 i pilnuj zgodności z deklaracją w sekcji head.<br>
<br>
<br>
<br>
Drugi typowy błąd to brak miejsca do rozdania. justify-content działa tylko wtedy, gdy w kontenerze zostaje wolna przestrzeń. Jeśli dzieci wypełniają go szczelnie albo mają ustawione flex: 1, nie ma czego rozdzielać i żadna wartość nie przyniesie widocznej zmiany. Podobnie bywa z align-items, gdy wysokość kontenera wynika wyłącznie z zawartości. Nadaj kontenerowi wyraźną wysokość albo pozwól mu rosnąć, zanim zaczniesz wyrównywać.<br>
<br>
<br>
<br>
Flexbox zaczyna się od jednej decyzji: który element jest kontenerem. To na nim ustawiasz display: flex, a nie na dzieciach. Najczęstszy błąd polega na dodaniu tej reguły do elementu, który ma być tylko jednym z kilku równorzędnych bloków. Wtedy układ rozjeżdża się w nieprzewidywalny sposób, a ty szukasz winy w marginesach i szerokościach. Najpierw wskaż rodzica, który ma rozmieścić swoje bezpośrednie dzieci. Dopiero potem myśl o ich ustawieniu.<br>
<br>
<br>
<br>
Na koniec: nie mieszaj Flexboxa z ręcznym pozycjonowaniem i ułamkowymi marginesami. Jeśli elementy mają się rozkładać równomiernie, powierz to właściwościom flex, a nie kolejnym odstępom. Ustaw gap zamiast marginesów na dzieciach — odstępy przestaną się sumować i układ stanie się przewidywalny. Zacznij od kontenera, wskaż oś główną, a dopiero potem dopracuj szczegóły.