Plik zapisany jako index.html leży na dysku jak każdy inny dokument. Dwuklik na takim pliku nie łączy się z żadnym serwerem — system odczytuje rozszerzenie .html i uruchamia program przypisany do tego typu plików, najczęściej domyślną przeglądarkę. Adres widoczny w pasku zaczyna się wtedy od file://, a nie od http, co oznacza, że strona jest wczytywana wprost z twojego komputera.

Odstępy, które znikają po zawinięciu Najczęstszy błąd to wyłącznie po jednej stronie elementów. Dopóki wszystko mieści się w jednym rzędzie, wygląda dobrze. Po zawinięciu marginesy sumują się w pionie i poziome, tworząc nierówne przerwy między wierszami. Zamiast marginesów użyj gap na kontenerze, na przykład gap: 16px. Ta właściwość działa niezależnie od tego, ile wierszy powstanie, i nie wymaga obliczania, który element jest pierwszy ani ostatni.

Flex-wrap nie działa w próżni. Elementy muszą mieć realną podstawę do zawijania, czyli ograniczoną szerokość minimalną lub maksymalną. Sam flex-wrap: wrap bez zmiany flex-basis albo width nic nie zmieni, bo dzieci domyślnie kurczą się do zera i mieszczą się w jednej linii. Ustaw min-width lub flex-basis na taką wartość, poniżej której element przestaje być użyteczny — to sygnał dla przeglądarki, że czas przejść do nowego rzędu.

display: inline-block łączy cechy obu. Element płynie w linii jak urządzić małą kuchnię inline, ale przyjmuje szerokość, wysokość i pełne marginesy. To najczęstszy wybór przy przyciskach, plakietkach i kafelkach ustawianych obok siebie. Problem pojawia się przy wyrównaniu: elementy inline-block bazują na linii pisma, więc wysoki element wypycha w dół niższe, a pod spodem zostaje szczelina wynikająca z odstępu między liniami. Ustawienie vertical-align: top lub middle na wszystkich elementach zwykle to naprawia.

Podstawowy szkielet wygląda tak: w table umieszczasz tr, a w nim td lub th. Komórka nagłówkowa th jest domyślnie pogrubiona i wyśrodkowana, ale najważniejsze jest to, że niesie informację o tym, czego dotyczą dane w kolumnie lub wierszu. Dla tabelarycznych danych zawsze używaj th na początku wiersza lub kolumny — to nie kwestia wyglądu, lecz dostępności i poprawnego odczytu przez czytniki ekranu.

Kontener z display: flex domyślnie ustawia flex-wrap: nowrap. To znaczy, że wszystkie elementy dzieci muszą zmieścić się w jednej linii, nawet jeśli oznacza to ich kurczenie się do granic czytelności. Wystarczy dodać flex-wrap: wrap do rodzica, aby elementy, które nie mieszczą się w bieżącym rzędzie, przeszły do kolejnego zamiast się rozpychać i ściskać. To jedna z tych właściwości, które rozwiązują problem, zanim w ogóle się pojawi.

Uważaj na łączenie wielu źródeł stylów. Kolejność arkuszy, kolejność bloków w pliku i kolejność importów sumują się w jedną wspólną listę. Reguła z arkusza dołączonego później może nadpisać wszystko, co było wcześniej, nawet jeśli w tamtym pliku wyglądała niewinnie. Podobnie jest z regułami wstawionymi bezpośrednio w atrybucie stylu — one mają wyższy priorytet niż zwykłe reguły z arkusza, więc żadna późniejsza linia ich nie przebije, dopóki nie użyjesz odpowiedniego znacznika ważności.

Na koniec: nie mieszaj flex-wrap z pozycjonowaniem absolutnym dzieci. Elementy wyjęte z przepływu nie biorą udziału w zawijaniu i mogą wylądować w losowym miejscu. Jeśli potrzebujesz siatki o stałych kolumnach, rozważ grid, a flex-wrap zostaw tam, gdzie zawartość ma się swobodnie układać wierszami. Wtedy zachowasz przewidywalny układ i unikniesz ściskania, które psuje czytelność.

Samodzielny artykuł ma jedną wyraźną zaletę: można go przeczytać od początku do końca bez zaglądania gdziekolwiek indziej. Ma własny tytuł, własne wprowadzenie i własne zakończenie. Nadaje się do tematów, które da się wyczerpać w jednym podejściu — na przykład wyjaśnienie jednego pojęcia, opis jednej metody, odpowiedź na jedno pytanie. Uwaga praktyczna: jeśli w trakcie pisania łapiesz się na tym, że wciąż dopisujesz wątki poboczne, to znak, że temat jest za szeroki na jeden tekst. Wtedy lepiej rozbić go na części, zamiast rozdymać akapit do granic czytelności.

Kolejną pułapką jest sztywne ustawienie wysokości kontenera. Jeśli elementy przechodzą do nowego rzędu, a rodzic ma z góry określoną wysokość, zawartość zacznie wychodzić poza jego granice albo zostać obcięta. Pozostaw wysokość automatyczną, chyba że naprawdę wiesz, co robisz. Podobnie z align-items: center — przy wielu wierszach lepiej sprawdza się align-content, które odpowiada za rozmieszczenie całych linii, a nie pojedynczych elementów w linii.

W praktyce wygląda to tak: ustawiasz na kontenerze display: flex, flex-wrap: wrap, a na dzieciach elastyczne szerokości, na przykład flex: 1 1 240px. Wartości w skrócie flex oznaczają odpowiednio: zdolność do rozciągania, zdolność do kurczenia i bazową szerokość. Gdy dostępne miejsce pozwala na trzy kolumny, zobaczysz trzy. Gdy zrobi się węższe, czwarty element spadnie do nowej linii, a pozostałe zachowają sensowną szerokość zamiast zamieniać się w pionowe paski.