Zadania - Flexbox

ZADANIE 1 — Ustaw elementy w jednym rzędzie i wyśrodkuj

Polecenie:
Stwórz trzy prostokątne elementy i ułóż je obok siebie w jednym rzędzie. Następnie wyśrodkuj je poziomo i ustaw między nimi równy odstęp.

Podpowiedź:

– Zacznij od ustawienia display: flex na kontenerze.
– Aby elementy znalazły się obok siebie, Flexbox zrobi to automatycznie.
– Do wyśrodkowania użyj justify-content: center.
– Odstępy zrobisz właściwością gap.

ZADANIE 2 — Wyśrodkuj elementy pionowo i poziomo

Polecenie:

Utwórz kontener o wysokości 300px i umieść w nim jeden element. Wyśrodkuj go w pionie i poziomie.

Podpowiedź:

– Flexbox potrafi centrować elementy w obu kierunkach.
– Użyj dwóch właściwości naraz: justify-content (oś główna) i align-items (oś poprzeczna).
– Pamiętaj ustawić wysokość kontenera, inaczej pionowe centrowanie nie będzie widoczne.

ZADANIE 3 — Zmienna szerokość elementów dzięki flex

Polecenie:

Stwórz trzy elementy w jednym rzędzie. Pierwszy i trzeci mają mieć normalną wielkość, a środkowy ma rozciągać się, aby wypełnić całą pozostałą przestrzeń.

Podpowiedź:

– Pamiętaj, że flex: 1 sprawia, że element rośnie, aby zajmować dostępne miejsce.
– Użyj klasy dla środkowego elementu, aby nadać mu inną właściwość niż reszcie.
– Pozostałe elementy pozostaw bez flex, aby miały naturalną szerokość.

ZADANIE 4 — Zawijanie elementów + odstępy

Polecenie:

Stwórz kontener, który zawiera sześć kwadratowych elementów. Elementy mają:

– układać się w rzędzie,
– zawijać się, gdy zabraknie miejsca,
– mieć równe odstępy.

Podpowiedź:

– Podstawowy układ Flex jest w rzędzie, więc flex-direction nie musisz ustawiać.
– Aby umożliwić zawijanie do następnej linii, użyj flex-wrap: wrap.
– Pamiętaj o gap, aby nie ustawiać marginesów na każdym elemencie.

ZADANIE 5 — Różne wyrównania elementów w jednym kontenerze

Polecenie:

Stwórz cztery elementy ustawione w kolumnie.
Każdy element powinien mieć inne wyrównanie za pomocą align-self:

– pierwszy: początek,
– drugi: środek,
– trzeci: koniec,
– czwarty: cała szerokość.

Podpowiedź:

– Najpierw ustaw flex-direction: column w kontenerze.
– align-self działa jak align-items, ale tylko na jeden element.
– Aby element “rozciągnąć”, użyj align-self: stretch.