• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

Warto też rozróżnić align-items od align-content. Pierwsza dotyczy pojedynczej linii elementów, druga — wielu linii po zawinięciu (flex-wrap: wrap). Jeśli elementy nie zawijają się, align-content nie zrobi nic. Kolejna pułapka to mieszanie flexboxa z wartościami z gridu: w gridzie osie są stałe, niezależne od kierunku, więc te same nazwy właściwości zachowują się inaczej. Przy pracy z flexem zawsze najpierw sprawdź flex-direction, potem dobierz właściwości do osi.

Do nadpisania wyrównania jednego elementu służy align-self. Działa identycznie jak align-items, ale stosuje się je do konkretnego dziecka, nie do całego kontenera. Typowy przypadek: wszystkie elementy wyrównane do góry, a jeden ma być przyklejony do dołu. Wystarczy dodać mu align-self: flex-end. Uwaga na margin: auto — w kontenerze flex automatyczne marginesy potrafią przejąć kontrolę nad pozycją i wyłączyć działanie obu omawianych właściwości.

Szerokości i obramowania reguluje się w CSS, nie w atrybutach HTML. Dawny atrybut border na elemencie jest przestarzały. Zamiast niego użyj border-collapse: collapse, żeby linie się nie dublowały, oraz padding w komórkach, żeby tekst nie dotykał krawędzi. Pamiętaj, że table-layout: fixed przyspiesza renderowanie, ale wymaga jawnie określonych szerokości kolumn — inaczej przeglądarka podzieli dostępną przestrzeń po swojemu.

Najbezpieczniejsza praktyka jest jedna: procentowy flex-basis stosuj tylko wtedy, gdy rodzic ma jawną szerokość lub jest elementem siatki, a wartości zaokrąglaj w dół i wyrównuj grow. Dzięki temu układ nie rozjedzie się przy zmianie czcionki, długości tekstu ani szerokości okna.

Dlaczego jedne właściwości przechodzą, a inne n

Prosty sposób na zapamiętanie: justify-content ustawia rozkład wzdłuż głównego kierunku, w którym układają się elementy, a align-items decyduje, jak leżą w poprzek tego kierunku. Gdy układ się nie zmienia zgodnie z oczekiwaniem, zamiast dokładać kolejne właściwości, sprawdź kierunek osi głównej i to, czy kontener ma w ogóle wolne miejsce. Ta jedna kontrola rozwiązuje większość problemów z wyrównaniem.

Najczęstsze błędy, które psują odbiór Do typowych wpadek należy wpisywanie nazwy pliku, np. „IMG_2043.jpg". Czytnik odczyta to jako ciąg znaków bez sensu. Drugi błąd to powtarzanie treści, która stoi obok obrazu — wtedy użytkownik słyszy to samo dwa razy. Kolejny to wrzucanie do alta słów kluczowych dla wyszukiwarki, co psuje opis i bywa odbierane jako spam. Zdarza się też nadmiar: alt na pół ekranu, zamiast jednego zwięzłego zdania. I odwrotnie — zbyt ogólnikowe „zdjęcie" nic nie wnosi.

Na koniec: sprawdź alt w praktyce. Wyłącz obrazy w przeglądarce i zobacz, czy strona nadal ma sens. Uruchom czytnik ekranu i posłuchaj, czy opisy nie są mylące. Poproś kogoś, kto nie zna układu strony, by powiedział, co rozumie z samego alta. Jeśli nie potrafi — opis wymaga poprawy.

Najczęstszy błąd polega na tym, że ktoś chce wyśrodkować element w kontenerze i sięga po justify-content, mimo że kontener ma domyślnie flex-direction: row. Wtedy wyśrodkowanie działa poziomo, a element nadal jest przyklejony do góry. Poprawne rozwiązanie to zestawienie obu właściwości: justify-content: center odpowiada za środek poziomo, a align-items: center za środek pionowo. Warto o tym pamiętać, bo dopiero ich para daje pełne wyśrodkowanie w obu wymiarach.

Gdzie najczęściej popełnia się błąd Najczęstszy błąd to opakowywanie w article wszystkiego, co ma nagłówek. Drugi to używanie section jako uniwersalnego pojemnika na wszystko — zamiast div. section nie jest zamiennikiem div; ma sens tylko wtedy, gdy grupuje treść wokół jednego tematu i zwykle zaczyna się od nagłówka. Jeśli nie potrafisz nazwać tematu tej grupy, prawdopodobnie potrzebujesz div.

Nie kieruj się wyglądem ani stylowaniem. article i section nie mają domyślnych stylów, więc wybór nie wpłynie na layout. Ma znaczenie dla dostępności, czytników ekranu i wyszukiwarek, które lepiej rozumieją, co jest samodzielną treścią, a co tylko fragmentem. Jeśli masz wątpliwość, zadaj sobie pytanie: wykończenie wnętrz czy to jest pełna, niezależna historia? If you loved this informative article and you would love to receive more details with regards to poradnik generously visit our own site. Jeśli tak — article. Jeśli nie — section albo div.

Sprawdź to testem wyjęcia. Skopiuj fragment do notatnika i przeczytaj. Karta produktu z nazwą, opisem i przyciskiem nadal działa? To article. Lista pytań i odpowiedzi bez nagłówka strony traci sens? To section. Ten test rozstrzyga większość wątpliwości szybciej niż analizowanie specyfikacji.

Osobna pułapka to obrazy pełniące funkcję przycisku lub odnośnika. Jeśli kliknięcie w ikonę przenosi do innej sekcji, alt musi opisywać cel, np. „przejdź do formularza kontaktowego". Wtedy nie opisuj wyglądu ikony, tylko jej zadanie. Przy obrazach z tekstem, np. plakatach, alt powinien zawierać ten sam tekst, bo inaczej treść przepadnie dla osób, które go nie widzą.