Zadanie 130: Flexbox - Wprowadzenie

Cel zadania

Zrozumienie i praktyczne zastosowanie modelu Flexbox w CSS do tworzenia elastycznych układów strony.

Opis teoretyczny

Flexbox (Flexible Box Module) to model układu w CSS zaprojektowany do jednowymiarowego rozmieszczania elementów (w wierszu lub kolumnie). Pozwala na łatwe zarządzanie przestrzenią i wyrównywaniem elementów w kontenerze.

Podstawowe pojęcia:

Flex Container (Kontener): Element rodzic, któremu nadajemy właściwość display: flex;.
Flex Items (Elementy): Bezpośrednie dzieci kontenera, które stają się elastycznymi elementami.
Osie (Main Axis i Cross Axis):
- Main Axis (Oś główna): Domyślnie pozioma (od lewej do prawej). Wzdłuż niej działają właściwości takie jak justify-content.
- Cross Axis (Oś poprzeczna): Domyślnie pionowa (z góry na dół). Wzdłuż niej działają właściwości takie jak align-items.

Kluczowe właściwości kontenera:

display: flex; - Aktywuje Flexbox.
flex-direction: Określa kierunek osi głównej (row - domyślnie, column, row-reverse, column-reverse).
flex-wrap: Określa, czy elementy mają się zawijać do nowej linii (nowrap - domyślnie, wrap, wrap-reverse).
justify-content: Wyrównuje elementy wzdłuż osi głównej (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-items: Wyrównuje elementy wzdłuż osi poprzecznej (stretch - domyślnie, flex-start, flex-end, center, baseline).
gap: Odstęp między elementami.

Kluczowe właściwości elementów:

flex-grow: Określa, jak bardzo element może urosnąć względem innych.
flex-shrink: Określa, jak bardzo element może się skurczyć.
flex-basis: Określa bazowy rozmiar elementu przed rozdysponowaniem wolnej przestrzeni.
align-self: Pozwala nadpisać align-items dla konkretnego elementu.

Przykłady kodu

1. Włączenie Flexboxa

.container {
    display: flex;
}

2. Wyśrodkowanie elementu (Idealne centrum)

Najczęstszy przypadek użycia Flexboxa.

.container {
    display: flex;
    justify-content: center; /* Poziomo */
    align-items: center;     /* Pionowo */
    height: 100vh;           /* Pełna wysokość widoku */
}

3. Rozłożenie elementów w nawigacji

.nav-links {
    display: flex;
    justify-content: space-between; /* Elementy maksymalnie rozsunięte */
    list-style: none;
}

4. Flex w kolumnie

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Odstęp między elementami */
}

Zadania do wykonania

Zadanie 1: Wyśrodkowanie elementu

Utwórz kontener o wymiarach 400x400px z szarym tłem. Wewnątrz umieść jeden mniejszy element (np. div 100x100px) z czerwonym tłem. Użyj Flexboxa, aby idealnie wyśrodkować ten czerwony element zarówno w pionie, jak i w poziomie.

Zadanie 2: Pasek nawigacji (Navbar)

Stwórz belkę nawigacyjną (np. <nav>) z listą linków (np. <ul> i <li>). Linki to: "Strona główna", "O nas", "Usługi", "Kontakt". Użyj Flexboxa, aby:

Ustawić linki w jednej linii.
Rozmieścić je równomiernie na całej szerokości belki (space-between lub space-around).
Usunąć domyślne style listy (kropki, marginesy).

Zadanie 3: Kolumny o równej wysokości

Stwórz kontener z trzema kolumnami (div-ami). Wypełnij je różną ilością tekstu (tak, aby naturalnie miały różną wysokość). Użyj Flexboxa, aby wszystkie kolumny miały tę samą wysokość (równą wysokości najwyższej kolumny). Dodatkowo, ustaw odstęp (gap) między kolumnami na 20px.

Zadanie 4: Zmiana kolejności (Order)

Stwórz kontener z 5 ponumerowanymi elementami (1, 2, 3, 4, 5). Używając właściwości order (bez zmiany kodu HTML!), spraw, aby:

Element nr 1 był na końcu.
Element nr 5 był na początku.
Reszta pozostała na swoich miejscach.

Zadanie 5: Responsywna galeria (Wrap)

Stwórz kontener z 10 elementami (np. kwadratami o boku 150px) w różnych kolorach. Ustaw kontener tak, aby elementy układały się w rzędzie, ale jeśli brakuje miejsca w oknie przeglądarki, powinny one automatycznie przeskakiwać do następnego wiersza (flex-wrap). Wyśrodkuj elementy w wierszach.

Pliki do zadania

W folderze znajduje się plik index.html oraz style.css, które zawierają przykłady omówionych właściwości. Przeanalizuj je!