Flex a elementy blokowe: kiedy znika nowa linia w tekście
Tabela w HTML to nie zwykły układ kolumn i wierszy, lecz struktura danych, w której każda komórka ma swoje miejsce i znaczenie. Fundament tworzą trzy elementy: jako całość, <br>
<br>
jako wiersz oraz jako pojedyncza komórka z danymi. Dopiero na tym szkieletu buduje się nagłówki i podpisy. Jeśli od razu pomieszasz te role, tabela zacznie działać przypadkowo — na przykład gdy w jednym wierszu dasz za mało komórek, przeglądarka sama je dorysuje w niewłaściwym miejscu.<br>
<br>
<br>
<br>
Kiedy używać kolumny, a kiedy zawijania Jeśli potrzebujesz pionowego stosu bloków, kolumna jest najprostsza. Pamiętaj jednak, że w kolumnie oś główna biegnie z góry na dół, więc justify-content steruje odstępami w pionie, a align-items w poziomie. To odwrócenie intuicji bywa źródłem błędów: ktoś ustawia justify-content: center i dziwi się, że bloki nie wyśrodkowały się w poziomie. W kolumnie odpowiada za to align-items.<br>
<br>
<br>
<br>
Typowe pomyłki są zawsze takie same. Mieszanie ukośników wstecznych i zwykłych w jednym zapisie, brak rozróżnienia wielkości liter na serwerze produkcyjnym, dodanie ../ o jeden poziom za dużo lub za mało, pomijanie spacji i polskich znaków w nazwach plików bez ich zakodowania. Osobny problem to linki bezwzględne ze sztywno wpisaną domeną: działają lokalnie, a po przeniesieniu na inny adres przestają prowadzić do celu. Ścieżka względna jest odporniejsza na zmianę domeny, ale wymaga poprawnego punktu startu.<br>
<br>
<br>
<br>
Najczęstszy błąd to traktowanie tabeli jako narzędzia do rozplanowania strony. Siatka komórek świetnie nadaje się do zestawień liczbowych, harmonogramów czy porównań, ale do rozmieszczenia nagłówka, menu i stopki służą zupełnie inne mechanizmy. Tabela użyta do układu psuje kolejność czytania i utrudnia responsywność. Drugi typowy problem to ręczne ustawianie szerokości i wysokości komórek. Lepiej pozwolić, by zawartość naturalnie rozszerzała kolumny, a ewentualne obramowania i odstępy załatwić w arkuszu stylów.<br>
<br>
<br>
<br>
Odwołanie do pliku leżącego w innym katalogu najczęściej psuje się z jednego powodu: autor miesza ścieżkę względną z bezwzględną i nie sprawdza, od jakiego miejsca system liczy drogę. Ścieżka bezwzględna zaczyna się od korzenia — w systemach uniksowych od ukośnika, w adresach od protokołu i domeny. Ścieżka względna startuje od katalogu, w którym znajduje się plik ją zawierający. Ta różnica decyduje o tym, czy odnośnik w ogóle zadziała.<br>
<br>
<br>
<br>
Jak wymusić zawijanie bez psucia proporcji Najpierw ustaw kontener: display: flex oraz flex-wrap: wrap. Następnie zadbaj o szerokość elementów. Jeśli elementy mają width: 100%, żaden nie zmieści się obok drugiego i każdy wyląduje w osobnej linii. Lepiej użyć flex: 1 1 240px, co daje elastyczną podstawę i pozwala elementom rosnąć lub maleć w ramach rzędu. Wartość basis decyduje o punkcie, w którym element przechodzi do nowej linii. Im większa, tym szybciej zawija.<br>
<br>
<br>
<br>
Drugi częsty problem to wysokość. Po zawinięciu elementy w jednej linii rozciągają się do najwyższego z nich, jeśli align-items ma wartość stretch. To bywa pożądane, ale przy kartach o różnej treści może wyglądać nierówno. Wtedy ustaw align-items: flex-start albo align-content, aby kontrolować rozkład całych linii. align-content działa tylko wtedy, gdy istnieje więcej niż jedna linia i kontener ma wolną przestrzeń w kierunku poprzecznym.<br>
<br>
<br>
<br>
Flexbox zaczyna się od jednej decyzji: który element jest kontenerem. To na nim ustawiasz display: flex, a nie na dzieciach. Najczęstszy błąd polega na dodaniu tej reguły do elementu, który ma być tylko jednym z kilku równorzędnych bloków. Wtedy układ rozjeżdża się w nieprzewidywalny sposób, a ty szukasz winy w marginesach i szerokościach. Najpierw wskaż rodzica, który ma rozmieścić swoje bezpośrednie dzieci. Dopiero potem myśl o ich ustawieniu.<br>
<br>
<br>
<br>
Kolejna pułapka to marginesy. W kontenerze flex marginesy pionowe między elementami nie znikają same, ale nie sumują się tak jak w zwykłym przepływie. Jeśli chcesz równomierne odstępy, użyj gap zamiast marginesów. Działa on zarówno w wierszu, jak i w kolumnie, i nie powoduje podwójnych odstępów na stykach. To czystsze rozwiązanie niż ręczne zerowanie marginesów przy każdym dziecku.<br>
<br>
<br>
<br>
Osobny problem to utrata nowej linii wewnątrz samego bloku tekstowego. Element flex nie gubi znaków nowej linii z tekstu — gubi je, gdy zamieniasz tekst na elementy flex albo gdy nadpisujesz white-space. Jeśli akapit jest dzieckiem flexa, nadal zachowuje się jak blok tekstowy, chyba że ustawisz mu display: inline lub podobnie. Wtedy nowe linie przestają być respektowane, a tekst zlewa się w jeden ciąg. Rozwiązaniem jest przywrócenie white-space: pre-line albo pozostawienie domyślnego normal i pilnowanie, by nie nadpisywać go bez potrzeby.<br>
<br>
<br>
<br>
Zacznij od ustalenia punktu odniesienia. Jeśli plik źródłowy leży w katalogu oferta, a dokument docelowy w oferta/cenniki, wystarczy zapis cenniki/plik.pdf. Gdy cel jest w katalogu nadrzędnym, używamy dwóch kropek: ../. Każde ../ to jedno przejście w górę drzewa katalogów. Dwa poziomy w górę to ../../. Bez tego mechanizmu link do pliku spoza bieżącego folderu nie powstanie.