Gdy szerokość elementu decyduje o układzie, wybierz flex-basis świadomie

Atrybut for i identyfikator to podstawa Najprostsze rozwiązanie to para atrybutów: w etykiecie for, a w polu id o tej samej wartości. Wartości muszą być identyczne co do znaku, w tym wielkości liter, i unikalne w całym dokumencie. Typowy błąd to powielenie identyfikatora na stronie — wtedy kliknięcie prowadzi do pierwszego pasującego elementu, a nie do tego, który widzisz. Drugi częsty problem to identyfikator zaczynający się od cyfry lub zawierający spację. Przeglądarki różnie to interpretują, a walidacja zgłasza błąd. Trzymaj się liter, cyfr i myślników, zaczynając od litery.

Osobny przypadek to etykieta otaczająca pole. Zamiast atrybutu for umieszczasz kontrolkę wewnątrz elementu etykiety. Wtedy kliknięcie działa bez identyfikatora, co bywa wygodne przy prostych układach. Uwaga jednak: jeśli wewnątrz etykiety znajdzie się jeszcze jeden element interaktywny, na przykład przycisk czyszczenia pola, kliknięcie w niego może wywołać podwójne zdarzenie — raz dla przycisku, raz dla etykiety. To częsta przyczyna tego, że pole czyści się i od razu odzyskuje fokus, albo że tekst wpisany przez użytkownika znika.

Sprawdź też, czy etykieta nie jest ukryta przed czytnikami ekranu za pomocą atrybutu aria-hidden. Wizualnie działa, ale dostępność spada. Gdy etykieta ma pełnić funkcję czysto ozdobną, użyj zwykłego elementu tekstowego, a nie etykiety. Mieszanie tych dwóch ról prowadzi do tego, że kliknięcie raz działa, raz nie, zależnie od tego, w którą część napisu trafisz.

Gdy generujesz formularz z pętli, nie sklejaj identyfikatorów ręcznie z liczbą porządkową. Wystarczy jedno przemianowanie elementu w kodzie i powiązanie pęka, choć wizualnie nic się nie zmieni. Lepiej wyprowadź identyfikator z nazwy pola albo z jego roli, a jeśli framework sam nadaje identyfikatory, korzystaj z gotowej referencji zamiast wpisywać ją z palca.

Z auto korzystasz wtedy, gdy chcesz, aby element rósł i kurczył się razem z treścią, ale nadal podlegał regułom flex-shrink i flex-grow. To dobre rozwiązanie dla przycisków, etykiet i elementów, których szerokość ma wynikać z ich zawartości. Uwaga na typowy błąd: ustawienie width razem z flex-basis auto powoduje, że przeglądarka użyje width jako podstawy, a nie szerokości treści. W praktyce często prowadzi to do nieprzewidywalnego zachowania przy zmianie rozmiaru okna.

Testuj w przeglądarce, zmniejszając okno płynnie, a nie skokowo między dwoma szerokościami. Sprawdź też widok przy powiększonej czcionce, bo użytkownik może mieć ustawiony większy rozmiar tekstu. Media queries działają na szerokość okna, a nie na rozdzielczość ekranu, więc telefon w trybie poziomym może zachowywać się jak tablet. Jeśli używasz max-width i min-width jednocześnie, pamiętaj, że zakresy nie mogą na siebie nachodzić, bo jedna reguła nadpisze drugą w nieprzewidywalny sposób. Najbezpieczniej trzymać się jednego kierunku — albo samych min-width, albo samych max-width.

Kliknięcie w opis obok pola formularza powinno przenieść kursor do środka tego pola. Jeśli tak się nie dzieje, najczęściej brakuje powiązania między etykietą a elementem formularza. Sam napis obok niczego nie uruchamia — przeglądarka nie zgaduje, do czego należy. Trzeba jej to powiedzieć wprost, a sposobów jest kilka. Każdy ma inne konsekwencje, gdy pracujesz z dynamicznym formularzem, wieloma polami albo dostępnością.

Praktyczna zasada jest prosta: jeśli element ma być elastyczny i zależny od treści, zostaw auto. Jeśli ma mieć stały udział w układzie albo równy podział, użyj konkretnej wartości, najlepiej 0 lub wartości procentowej. Testuj układ przy wąskim oknie i przy długich tekstach. Sprawdź, czy elementy się nie nachodzą i czy nie pojawia się poziomy pasek przewijania. Świadomy wybór między auto a konkretną wartością to różnica między układem, który się sam broni, a takim, który trzeba łatać przy każdej zmianie treści.

Element ma ustawione width: 400px, a mimo to na ekranie jest węższy. Kursor zatrzymuje się na nim, a szerokość w narzędziach deweloperskich pokazuje mniejszą wartość. To nie błąd przeglądarki — to domyślne zachowanie flexboxa. Każdy element będący dzieckiem kontenera z display: flex dostaje na starcie flex-shrink: 1, nawet jeśli nigdzie tego nie zapisano. Szerokość bazowa to tylko punkt wyjścia, nie twardy limit.

Wiersze, komórki i atrybuty, które porządkują ukł

Typowe błędy pojawiają się przy łączeniu metod. Ustawienie font-size: 0 na kontenerze, a potem dodanie odstępu marginesem, daje podwójny efekt i rozjazd o kilka pikseli. Podobnie bywa z inline-block i vertical-align — domyślna wartość baseline potrafi dodać niewidoczny odstęp pod elementem, który wygląda jak biały znak, ale nim nie jest. Warto sprawdzić oba źródła, zanim zacznie się szukać winy w szerokościach.