5 sposobów na wyrównanie inline-block do linii bazowej i górnej krawędzi
Najprostsze rozwiązanie to właściwość vertical-align. Domyślnie przyjmuje wartość baseline, czyli właśnie wyrównanie do linii bazowej. Jeśli chcesz, aby elementy inline-block miały równą górną krawędź, ustaw vertical-align: top. W praktyce oznacza to, że niezależnie od zawartości i wysokości, wierzchołki bloków znajdą się na tym samym poziomie. Pamiętaj, że vertical-align działa tylko na elementach inline i inline-block — nie zadziała na zwykłych blokach.<br>
<br>
<br>
<br>
Ustawianie flex-basis w procentach wydaje się proste: element ma zająć np. 50% szerokości kontenera. W praktyce procenty odnoszą się nie do szerokości rodzica, lecz do jego rozmiaru wzdłuż osi głównej. Jeśli kontener ma flex-direction: row, osią główną jest szerokość, więc 50% oznacza połowę szerokości. Gdy zmienisz kierunek na column, oś główna to wysokość i 50% odniesie się do wysokości kontenera. To najczęstsze źródło błędów.<br>
<br>
<br>
<br>
Jeśli chcesz, żeby jakaś niedziedziczona właściwość jednak trafiła do dzieci, użyj wartości inherit w regule dotyczącej dziecka, na przykład border: inherit. To celowe i świadome działanie, ale uwaga na pułapkę: dziedziczysz wtedy dokładną wartość rodzica, także szerokość i kolor. Przy zagnieżdżonej strukturze ramki mogą się zwielokrotnić. Zamiast tego często lepiej użyć zmiennej CSS zdefiniowanej na rodzicu i odwołać się do niej w dzieciach — wtedy kontrola jest pełna, a efekt przewidywalny. Wartość initial przywraca ustawienie domyślne i bywa mylona z inherit, choć robi coś zupełnie innego.<br>
<br>
<br>
<br>
Gdy elementy mają różną zawartość, flex-basis w procentach bywa mylące, bo nie gwarantuje równej szerokości, jeśli flex-shrink i flex-grow są ustawione inaczej. Domyślne flex-shrink: 1 pozwala elementom się kurczyć poniżej basis, gdy brakuje miejsca. Jeśli chcesz sztywnego podziału, ustaw flex-shrink: 0. I ostatnia rzecz: procenty w flex-basis nie działają względem rozmiaru samego elementu ani względem sąsiadów — tylko względem rodzica. Testuj układ przy różnych szerokościach okna, bo to najszybciej pokazuje, czy procenty faktycznie odnoszą się do tego, czego oczekujesz.<br>
<br>
<br>
<br>
Selektor znacznika celuje we wszystkie elementy danego typu, na przykład akapity albo listy. Zapis jest krótki i nie wymaga dopisywania niczego w HTML-u. Problem pojawia się, gdy ten sam znacznik pełni na stronie różne role — wtedy jedna reguła zaczyna wpływać na miejsca, których wcale nie chciałeś ruszać. To najczęstsze źródło sytuacji, w której poprawka w jednym miejscu psuje układ w trzech innych.<br>
<br>
<br>
<br>
Kiedy linia bazowa psuje układ i jak to naprawić Typowy błąd: dwa elementy inline-block obok siebie, jeden z tekstem, drugi z obrazkiem. Obrazek nie ma linii bazowej, więc przeglądarka traktuje jego dolną krawędź jako linię bazową. Wtedy tekst „opada" względem obrazka. Rozwiązania są dwa: albo ustawić vertical-align: top na obu elementach, albo na obrazku dać vertical-align: middle i wyrównać do środka. Warto też pamiętać, że line-height rodzica wpływa na pozycję linii bazowej — zbyt duża wartość potrafi dodać niechciany odstęp pod elementem.<br>
<br>
<br>
<br>
Elementy inline-block domyślnie wyrównują się do linii bazowej, co często powoduje nieprzewidywalne przesunięcia w pionie. Linia bazowa to umowna linia, na której „siedzą" litery — nie dolna krawędź elementu, lecz miejsce, gdzie kończą się znaki bez zejścia poniżej (np. „a", „c"). Gdy obok siebie stoją elementy o różnej wysokości i różnym kontekście, ich linie bazowe potrafią się rozjechać. Efekt: jeden blok „ucieka" w górę, drugi w dół, a layout wygląda na zepsuty.<br>
<br>
<br>
<br>
Kiedy ustawiasz w kontenerze flex element z długim tekstem, obrazkiem lub przyciskiem, często okazuje się, że mimo wartości flex-shrink większej od zera element nadal nie chce się zmniejszyć. Wygląda to jak błąd, ale nim nie jest. Wartość flex-shrink mówi jedynie, jak bardzo element ma się kurczyć względem innych, a nie poniżej pewnego progu. Ten próg to minimalna szerokość treści, czyli min-content.<br>
<br>
<br>
<br>
Kolor tekstu ustawiony na rodzicu pojawia się na dzieciach, a ramka z tego samego rodzica już nie. To nie jest błąd przeglądarki ani widzimisię twórców CSS. Wynika to z rozróżnienia na właściwości dziedziczone i niedziedziczone, które w kaskadzie działa według ściśle określonych reguł.<br>
<br>
<br>
<br>
Kolejny problem to zawartość. Flex-basis określa rozmiar początkowy, ale jeśli w elemencie jest długi tekst lub obraz, może on rozepchnąć układ. Wtedy flex-shrink zmniejszy elementy proporcjonalnie, ale nie zawsze zgodnie z planem. Aby temu zapobiec, stosuj min-width: 0 na elementach flex lub dodawaj overflow: hidden. Warto też testować w różnych przeglądarkach, bo interpretacja procentów w flex-basis bywała niespójna w starszych wersjach.<br>
<br>
<br>
<br>
Przy flex-wrap: wrap procenty odnoszą się do szerokości kontenera, ale po zawinięciu nowy wiersz może mieć inną dostępną szerokość. Wtedy elementy z flex-basis: 50% mogą nie zmieścić się obok siebie i spowodować nieoczekiwane łamanie. Jeśli chcesz mieć pewność, użyj calc() z odejmowaniem odstępów, np. flex-basis: calc(50% - 10px), i pamiętaj o gap. Dzięki temu unikniesz błędów zaokrągleń i niepożądanych przeniesień.