Co się stanie, gdy section i article zamienią się miejscami
Flex-grow nie ustawia szerokości elementu. Określa tylko, jak podzielić wolną przestrzeń, która zostaje w kontenerze po odjęciu sumy bazowych rozmiarów wszystkich elementów potomnych. Jeśli w wierszu o szerokości 900 px masz trzy elementy z flex-basis: 200px, suma bazowa wynosi 600 px, a do podziału zostaje 300 px. Ta reszta trafia do elementów proporcjonalnie do wartości flex-grow.<br>
<br>
<br>
<br>
Uważaj też na sytuację odwrotną: w . Jest poprawna, gdy tematy naprawdę się rozdzielają, ale gdy tworzysz kilka poziomów tylko po to, by dopasować się do wyglądu, lepszym rozwiązaniem jest . Pamiętaj, że znaczniki niosą informację dla czytników ekranu i robotów indeksujących; nadmiar sekcji bez nagłówków tę informację zaburza.<br>
<br>
<br>
<br>
Konkretna wartość, np. 300px, 40% albo 12rem, działa inaczej. Ustawia sztywny punkt startowy przed rozdzielaniem wolnego miejsca przez flex-grow i zanim flex-shrink zacznie zabierać przestrzeń. To ważne, bo w praktyce najczęstszy błąd polega na mieszaniu flex-basis auto z flex-grow bez świadomości, że elementy startują z różnych szerokości. Jeden element może mieć 80px, drugi 400px, a dopiero potem oba rosną. Efekt bywa nierówny i trudny do przewidzenia.<br>
<br>
<br>
<br>
Nie używaj tabel do budowania layoutu strony. Owszem, kilkanaście lat temu było to powszechne, ale dziś prowadzi do problemów z responsywnością i semantyką. Tabela ma sens tylko wtedy, gdy prezentuje dane w układzie wierszy i kolumn. Jeśli potrzebujesz siatki do rozmieszczenia elementów, sięgnij po inne rozwiązania, na przykład elastyczne kontenery.<br>
<br>
<br>
<br>
Samo dodanie meta viewport nie naprawi jednak strony zbudowanej na sztywnych szerokościach. Jeśli kontener ma wpisane width: 1200px, telefon nadal będzie ściskał treść albo pokaże poziomy suwak. Meta viewport to warunek konieczny, ale nie wystarczający. Dopiero razem z elastycznym układem, procentowymi szerokościami i obrazkami skalującymi się do kontenera daje czytelny efekt na każdym ekranie.<br>
<br>
<br>
<br>
Rozwiązanie to znacznik meta viewport umieszczony w sekcji head dokumentu HTML. W najprostszej wersji wygląda tak: . Pierwsza wartość mówi przeglądarce, żeby szerokość widoku odpowiadała fizycznej szerokości ekranu. Druga ustawia początkowy poziom powiększenia na 1, czyli bez zbędnego skalowania. Ta jedna linia zmienia sposób, w jaki telefon traktuje całą stronę.<br>
<br>
<br>
<br>
Jak uniknąć typowych pułapek z flex-basis w procentach Pamiętaj, że flex-basis współpracuje z flex-grow i flex-shrink. Gdy ustawisz flex-basis: 25% dla czterech elementów, suma da 100%, ale marginesy, padding i obramowania mogą spowodować przepełnienie. Domyślnie box-sizing: content-box wlicza padding i border do szerokości całkowitej, więc elementy mogą się zawijać lub ściskać. Rozwiązanie: ustaw globalnie box-sizing: border-box lub dodaj flex-shrink: 0, jeśli chcesz wymusić stały rozmiar.<br>
<br>
<br>
<br>
Zanim ustawisz flex-basis: 30%, sprawdź, czy rodzic ma określoną szerokość. Procenty potrzebują punktu odniesienia. Jeśli kontener jest elementem inline lub ma szerokość auto bez zdefiniowanego rozmiaru, przeglądarka może potraktować procenty jako zero lub wartość nieokreśloną. W efekcie elementy nie rozłożą się zgodnie z oczekiwaniem. Ustaw szerokość rodzica (np. width: 100%, max-width) albo użyj jednostek viewportu, jeśli chcesz uniezależnić się od rodzica.<br>
<br>
<br>
<br>
Flex-basis decyduje o tym, od jakiej szerokości element zaczyna układać się w poziomym kontenerze. Wartość auto nie oznacza automatycznego dopasowania do treści, choć tak bywa odbierana. Oznacza ona: użyj szerokości elementu, a jeśli jej nie ma, zachowaj się jak content. Dlatego element bez ustawionej szerokości i bez flex-basis dostanie bazę wynikającą z zawartości, a nie z dostępnego miejsca w wierszu.<br>
<br>
<br>
<br>
Sprawdź stronę na prawdziwym telefonie, nie tylko w zwężonym oknie przeglądarki na komputerze. W trybie responsywnym na desktopie łatwo przeoczyć zachowanie przy zmianie orientacji ekranu. Obróć urządzenie, powiększ palcami, przewiń w bok — jeśli pojawia się poziomy pasek przewijania, gdzieś została sztywna szerokość. Napraw tę szerokość, a dopiero potem wracaj do viewportu.<br>
<br>
<br>
<br>
Znaczniki i opisują różne rzeczy i dlatego można je zagnieżdżać na dwa sposoby. w oznacza, że dzielisz samodzielną treść na części: wpis blogowy na wstęp, rozwinięcie i podsumowanie, produkt na opis i parametry. w oznacza odwrotność: zbierasz kilka samodzielnych treści w jeden blok tematyczny — na przykład lista komentarzy, w której każdy komentarz jest osobnym artykułem, albo sekcja „Aktualności" z kilkoma notkami.<br>
<br>
<br>
<br>
Jak to sprawdzić bez zgadywania Najprościej przypisz elementom tymczasowo tło i obramowanie, a w narzędziach deweloperskich włącz podgląd układu flex. Zobaczysz wtedy trzy liczby: bazę, wynik po rozdzieleniu wolnego miejsca i rzeczywistą szerokość. Jeśli baza jest inna, niż zakładasz, problem prawie zawsze siedzi w flex-basis auto albo w braku jawnej wartości. Warto też pamiętać, że flex-basis ma pierwszeństwo przed width. Ustawienie width: 200px i flex-basis: auto sprawi, że i tak liczy się width, ale flex-basis: 100px nadpisze tę wartość.