Cele lekcji

– poznasz podstawy Flexbox
– nauczysz się układać elementy w rzędzie i kolumnie
– opanujesz wyrównywanie elementów (justify-content, align-items)
– wykonasz proste układy stron

Lekcja 1 – podstawy Flexbox

Najważniejsze właściwości:
– display: flex
– flex-direction
– justify-content
– align-items
– gap

Zadanie 1 – pierwszy flex

Stwórz kontener z 3 divami. Ustaw je obok siebie przy użyciu Flexbox.
– każdy element: 100px x 100px
– dowolne kolory
– dodaj border do kontenera

Zadanie 2 – centrowanie

Wyśrodkuj jeden element w kontenerze:
– poziomo
– pionowo
Użyj justify-content i align-items.

Zadanie 3 – menu

Zbuduj poziome menu nawigacyjne:
– elementy w jednej linii
– odstępy między linkami
– wyśrodkowanie menu na stronie

Lekcja 2 – układy Flexbox

Zadanie 4 – różne szerokości

Stwórz 3 kolumny:
– pierwsza kolumna: flex 2
– druga i trzecia: flex 1
– wszystkie w jednym rzędzie

Zadanie 5 – karta produktu

Stwórz układ karty produktu:
– obrazek po lewej
– tekst po prawej
– użyj display: flex

Zadanie 6 – mini projekt

Stwórz prostą stronę:
– nagłówek
– menu poziome
– sekcja główna z 2 kolumnami
– stopka