Seria ćwiczeń: Mistrz Flexboxa

Te ćwiczenia pomogą Ci zrozumieć, jak kontrolować rozmieszczenie elementów na stronie.

Ćwiczenie 1: Idealne wyśrodkowanie

• Zadanie: Stwórz kontener o wysokości 100vh (cały ekran). Wewnątrz umieść czerwony kwadrat o wymiarach 100px x 100px.

• Cel: Użyj właściwości display: flex, justify-content oraz align-items, aby kwadrat znalazł się idealnie na środku strony.

Ćwiczenie 2: Pasek nawigacji (Navbar)

• Zadanie: Stwórz listę <ul> z pięcioma odnośnikami (np. Start, O nas, Galeria, Cennik, Kontakt).

• Cel: Usuń domyślne kropki listy. Za pomocą Flexboxa ustaw elementy w jednym rzędzie i rozmieść je tak, aby pierwszy i ostatni element przylegały do krawędzi kontenera, a reszta była rozłożona równomiernie (justify-content: space-between).

Ćwiczenie 3: Elastyczna galeria (Flex-wrap)

• Zadanie: Stwórz kontener, w którym znajdzie się 8 bloków (divów) o klasie .box. Każdy blok powinien mieć szerokość 250px i margines.

• Cel: Spraw, aby bloki układały się w rzędzie, ale automatycznie przechodziły do nowej linii, jeśli nie mieszczą się w szerokości okna przeglądarki (flex-wrap).

Ćwiczenie 4: Zmiana kolejności (Order)

• Zadanie: Stwórz trzy sekcje: A, B i C.

• Cel: Za pomocą samej właściwości order w CSS (bez zmiany kodu HTML), spraw, aby na ekranie wyświetlały się w kolejności: C, A, B.

Ćwiczenie 5: Pionowy stos z wyrównaniem

• Zadanie: Stwórz prostą kartę produktu (obrazek, tytuł, krótki opis, przycisk).

• Cel: Ustaw flex-direction: column. Spraw, aby przycisk zawsze znajdował się na samym dole karty, niezależnie od długości opisu (użyj margin-top: auto na przycisku lub odpowiedniego rozkładu przestrzeni).