Display inline psuje układ, bo zapominasz o wysokości linii

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.

Drugi typowy błąd to ustawianie line-height na dużych wartościach przy elementach inline-block. Wysoka linia nie wyrównuje elementu do tekstu, tylko dodaje puste pole nad i pod nim. Element nadal siedzi na linii bazowej, więc odstęp rośnie nierównomiernie. Zamiast zwiększać line-height, lepiej ustawić vertical-align na top albo bottom i ewentualnie skorygować marginesem. Podobnie z paddingiem — padding zwiększa wysokość elementu, ale nie przesuwa jego linii bazowej, więc górna krawędź ucieka w górę i psuje rytm wiersza.

Selektor to sposób, w jaki arkusz stylów albo skrypt odnajduje konkretny fragment dokumentu. W CSS i w JavaScripcie masz do dyspozycji trzy podstawowe narzędzia: znacznik, klasę i identyfikator. Wybór między nimi nie jest kwestią gustu — decyduje o tym, jak łatwo później zmienisz wygląd strony i jak bardzo kod stanie się odporny na błędy.

Zanim zmienisz display, sprawdź, czy element ma zachowywać się jak fragment tekstu czy jak niezależny prostokąt. Do pierwszego użyj inline, do drugiego block, a inline-block tylko wtedy, gdy naprawdę potrzebujesz obu cech naraz. Jeśli układ ma być elastyczny, lepszym rozwiązaniem od inline-block jest flex lub grid — nie walcz z odstępami między znakami, których inline-block sam nie usunie.

Sprawdzaj, czy problem dotyczy samego rodzica, czy także dzieci. Jeśli dziecko ma display: inline-block albo display: inline, flex i tak potraktuje je jako element flex. Nowa linia w tekście wewnątrz takiego elementu działa normalnie, ale przenoszenie całych bloków do kolejnego wiersza już nie. Kolejna pułapka to białe znaki w HTML — przy flexie nie generują odstępów między elementami, więc nie da się nimi sterować jak przy blokach.

Co ustawić, żeby górna krawędź i linia bazowa przestały walczyć Najprościej sięgnąć po właściwość vertical-align. Wartość top wyrównuje górną krawędź elementu do górnej krawędzi najwyższego elementu w linii. Wartość bottom robi to samo z dolną krawędzią. Wartość middle ustawia środek elementu na wysokości połowy wysokości x fontu — to przydaje się przy ikonach obok tekstu. Wartość baseline zostawia domyślne zachowanie i właśnie ona najczęściej psuje układ. Warto pamiętać, że vertical-align działa tylko na elementach inline i inline-block, a nie na blokach ani elementach flex.

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.

Elementy HTML domyślnie zachowują się w układzie na jeden z dwóch sposobów: jedne łamią linię przed sobą i po sobie, inne wchodzą w tekst jak słowa. Wartość display decyduje, czy element tworzy własny blok, czy tylko fragment wiersza. Zrozumienie tej różnicy rozwiązuje większość problemów z pionowymi odstępami i wysokością kontenerów, które na pierwszy rzut oka wyglądają na błąd przeglądarki.

Elementy ustawione jako inline-block zachowują się inaczej niż zwykłe bloki. Siadają w linii tekstu jak znaki, więc podlegają regułom typografii — między innymi wyrównaniu do linii bazowej. Domyślnie przeglądarka ustawia ich dolną krawędź dokładnie na linii bazowej otaczającego tekstu. Jeśli element ma wysokość większą niż wysokość fontu, jego dolna krawędź nie pokrywa się z dołem wiersza i cała linia zaczyna się rozjeżdżać. To najczęstsza przyczyna tego, że przycisk albo kafelek nagle „unosi" sąsiedni tekst o kilka pikseli w górę.

Typowy błąd to ustawianie height na elemencie inline i zdziwienie, że nic się nie dzieje. Drugi to próba wyśrodkowania inline-blocka przez margin: auto — to działa tylko dla bloku z określoną szerokością. Trzeci to mieszanie inline-blocków z blokami w jednym wierszu i walka z pionowym rytmem, którego źródłem jest właśnie line-height rodzica, a nie same elementy.