Po tej lekcji potrafisz
Rozmieścić elementy w wierszu i pozwolić im się zawijać.
Flexbox nadaje się do układania elementów przede wszystkim w jednym kierunku. Display: flex ustawiasz na rodzicu, a jego bezpośrednie dzieci stają się elementami elastycznymi. Gap dodaje równy odstęp. Flex-wrap pozwala przenieść część linków do kolejnego wiersza, gdy brakuje miejsca.
Dodaj style nawigacji. Używamy istniejących linków zamiast przycisków, ponieważ zmieniają miejsce w witrynie. Nawigacja działa bez JavaScript i pozostaje dostępna, gdy style nie zostaną załadowane.
nav { display: flex; flex-wrap: wrap; gap: .75rem; }
nav a {
display: inline-block;
padding: .65rem 1rem;
border: 1px solid #ccd5df;
border-radius: .5rem;
}
nav a:hover { background: #e2f2f1; }
a:focus-visible {
outline: 3px solid #075e68;
outline-offset: 4px;
}Teraz Twoja kolej
Zwęź okno, aż nawigacja się zawinie. Przejdź przez linki klawiszem Tab i otwórz jeden klawiszem Enter.
Sprawdź rozwiązanie i oczekiwany efekt
Linki zachowują odstępy i nie wychodzą poza ekran. Każdy aktywny link ma widoczny fokus. Tab idzie w kolejności zapisanej w HTML — CSS nie powinien przestawiać jej tak, aby mylić użytkownika.
Na co uważać
Hover dotyczy wskaźnika myszy. Użytkownik klawiatury potrzebuje focus-visible; nie ustawiaj outline: none bez zamiennika.
Zanim przejdziesz dalej: wykonaj ćwiczenie samodzielnie i dopiero wtedy oznacz lekcję jako ukończoną. Oznaczenie zapisuje Twój postęp, nie jest oceną nauczyciela.