Gdy elementy nie mieszczą się w wierszu, kto oddaje, a kto zabiera miejsce

2026-10-19T09:42:59Z

KathyT7637: Utworzono nową stronę "Elementy article i section wyglądają podobnie, ale pełnią różne funkcje w strukturze dokumentu. Article to samodzielna całość, którą można wyciąć z kontekstu i opublikować gdzie indziej — wpis na blogu, komentarz, karta produktu. Section to fragment większej całości, który samodzielnie nie ma sensu — rozdział, zakładka, grupa powiązanych treści. Od tej różnicy zależy, gdzie postawisz nagłówki i jak będą interpretowane przez czytnik…"

Elementy article i section wyglądają podobnie, ale pełnią różne funkcje w strukturze dokumentu. Article to samodzielna całość, którą można wyciąć z kontekstu i opublikować gdzie indziej — wpis na blogu, komentarz, karta produktu. Section to fragment większej całości, który samodzielnie nie ma sensu — rozdział, zakładka, grupa powiązanych treści. Od tej różnicy zależy, gdzie postawisz nagłówki i jak będą interpretowane przez czytniki ekranu oraz wyszukiwarki. Gdzie postawić header, a gdzie nav header to nie synonim górnego paska. To wprowadzenie do najbliższego kontekstu — może być nagłówkiem całej strony, ale też pojedynczego artykułu czy sekcji. W nagłówku strony zwykle ląduje logo, nazwa serwisu i główne menu. W nagłówku artykułu — tytuł, autor i data. Możesz mieć wiele elementów header w dokumencie, byle każdy należał do innego bloku. nav z kolei opisuje zbiór linków nawigacyjnych. Nie każdy zestaw odnośników to nawigacja: linki w stopce albo w akapicie nie muszą być w nav. Używaj go dla menu głównego, bocznego, breadcrumbów i spisu treści. Jeśli na stronie jest kilka nawigacji, rozróżnij je atrybutem aria-label, np. „menu główne" i „menu boczne". Osobny problem to brak , i . Przeglądarki i tak pogrupują wiersze, ale robią to po swojemu, co utrudnia stylowanie i drukowanie. z nagłówkami pozwala powtarzać je na każdej stronie wydruku, a trzyma podsumowania poza głównym obszarem danych. Pamiętaj, że musi być zdefiniowany przed , choć wyświetla się na końcu – to częsty błąd przy ręcznym pisaniu. Trzy właściwości decydują o tym, jak elementy zachowają się w kontenerze z display: flex, gdy brakuje miejsca lub gdy jest go za dużo. flex-grow mówi, ile wolnej przestrzeni element może pochłonąć. flex-shrink decyduje, czy element odda część swojego rozmiaru, gdy miejsca brakuje. flex-basis to punkt startowy — rozmiar, od którego zaczyna się cała gra. Najczęstszy błąd polega na tym, że ktoś ustawia tylko flex-grow i dziwi się, że elementy nie kurczą się po przekroczeniu szerokości kontenera. Domyślne wartości to flex-grow: 0, flex-shrink: 1 i flex-basis: auto, więc elementy co prawda się kurczą, ale nie rosną. Section bez nagłówka to znak, że prawdopodobnie używasz go jako zwykłego kontenera na stylowanie. Do tego służy div. Section ma sens wtedy, gdy grupuje treść wokół jednego tematu i ten temat da się nazwać nagłówkiem. Jeśli nie potrafisz wymyślić nagłówka dla swojej sekcji, to znaczy, że nie jest to jeszcze sekcja — to zbiór przypadkowych elementów. Ten test działa lepiej niż jakiekolwiek reguły składniowe. flex-grow działa jak licznik udziałów w wolnej przestrzeni. Jeśli dwa elementy mają flex-grow: 1 i flex-grow: 2, to drugi dostanie dwa razy więcej wolnego miejsca niż pierwszy. Ważne: dzielona jest tylko nadwyżka, a nie cała szerokość kontenera. Gdy elementy mają flex-basis: 100px każde, a kontener ma 400px, wolne 200px zostanie rozdzielone proporcjonalnie do wartości flex-grow. Wartość 0 oznacza, że element nie bierze udziału w podziale. Wartości ujemne są ignorowane, a liczby niecałkowite działają normalnie. Praktyczna kolejność pracy wygląda tak: naszkicuj układ na kartce, zaznacz, co się powtarza na podstronach, a co jest unikalne. Powtarzalne fragmenty trafiają do header, nav i footer, unikalne do main. Dopiero potem dodawaj klasy i style. Zanim uznasz strukturę za gotową, sprawdź ją bez CSS — jeśli po wyłączeniu arkuszy treść nadal układa się logicznie, a kolejność nagłówków ma sens, znaczniki spełniają swoje zadanie. Pamiętaj też, że elementy semantyczne nie zastępują nagłówków h1–h6; jeden system opisuje rolę kontenera, drugi hierarchię tekstu. Na koniec pamiętaj, że flex-grow nie działa w kontenerze, który nie jest flexboxem. Musisz mieć display: flex lub display: inline-flex na rodzicu. Wartości ułamkowe, na przykład 0.5, też są poprawne i pozwalają na drobniejsze proporcje. Sprawdzaj efekt w przeglądarce, bo to najszybszy sposób, żeby zobaczyć, czy wolna przestrzeń dzieli się tak, jak tego oczekujesz. Zagnieżdżanie article w article też bywa źródłem problemów. Komentarz pod wpisem to osobny article, ale nie powinien mieć nagłówka tego samego poziomu co sam wpis. Wpisz w strukturze artykuł główny jako h1, komentarze jako h2 lub h3 — w zależności od tego, jak głęboko siedzą. Wtedy nawigacja po nagłówkach pokazuje realną hierarchię, a nie płaską listę tytułów, w której nie wiadomo, co jest czym. 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.

Użytkownik:KathyT7637

2026-10-19T09:42:58Z

KathyT7637: Utworzono nową stronę "Miłośnik urządzania mieszkań z wieloletnią praktyką. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najbardziej lubię zmiany, które widać od pierwszego dnia."

Miłośnik urządzania mieszkań z wieloletnią praktyką. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najbardziej lubię zmiany, które widać od pierwszego dnia.

Mazovia - Wkład użytkownika [pl]

Gdy elementy nie mieszczą się w wierszu, kto oddaje, a kto zabiera miejsce

Użytkownik:KathyT7637