Lesson3

Lekcja 3: Flexbox – Zrób Porządek na Stronie Jak w Polskim Sklepie Spożywczym!

Wstęp

Witaj znowu, mistrzu kodowania! 🎩 Jeśli Twoja strona wygląda jak polski bazar w sobotę rano, gdzie każdy element rzuca się na promocję, to czas wprowadzić trochę porządku. I kto nam pomoże? Oczywiście, Flexbox!

Flexbox to jak doświadczony kierownik sklepu – wie, gdzie co powinno stać, żeby wszystko wyglądało pięknie, a nikt nie pchał się z wózkiem między półkami. Po tej lekcji Twoje elementy będą ustawione jak torebki makaronu na wyprzedaży w Biedronce — równiutko, schludnie i z uśmiechem na twarzy. Chwyć kawę, weź ciasteczko i zaczynamy porządki!

Krok 1: Uruchamiamy i Hostujemy z Caddy (Bo Porządek Musi Być!)

Zanim zaczniemy ustawiać naszych gości w równiutkie rzędy, uruchommy nasz projekt przy pomocy Caddy. Otwórz terminal i przejdź do folderu projektu:

cd ~/Documents/my-css-project

Teraz uruchom serwer z Caddy:

caddy file-server --listen :8080

Twoja strona jest teraz dostępna pod adresem http://localhost:8080. Czas ustawiać produkty na półkach!

Krok 2: Ustawiamy Flexbox – Kierownik Stoiska w Akcji!

Żeby zacząć używać Flexbox, wystarczy wskazać display: flex; na kontenerze. Wyobraź sobie, że Flexbox to jak kierownik zmiany – rozstawia każdego tam, gdzie jego miejsce.

Przygotowanie HTML:

Zaczynamy od rozłożenia półek (HTML) i ustawienia produktów (elementów):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Porządki</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flex-container">
        <div class="box">Ogórek 1</div>
        <div class="box">Ogórek 2</div>
        <div class="box">Ogórek 3</div>
        <div class="box">Ogórek 4</div>
    </div>
</body>
</html>

A teraz wyjaśnimy kierownikowi (Flexbox), jak ustawić ogórki w styles.css:

`styles.css`

body {
    font-family: Arial, sans-serif;
}

.flex-container {
    display: flex; /* Proszę bardzo, Flexbox wchodzi na scenę! */
    justify-content: space-around; /* Rozstawiamy ogórki równomiernie. */
    padding: 10px;
}

.box {
    padding: 20px;
    margin: 10px;
    background-color: darkgreen;
    color: white;
    font-weight: bold;
}

Zapisz plik, odśwież http://localhost:8080, i patrz: Twoje ogórki (div) stoją równiutko, jak torebki kaszy w najlepszym sklepie!

Krok 3: Zrozumienie Właściwości Flexbox – Jak Rozstawić Klientów

Flexbox oferuje całą gamę właściwości, żeby zaprowadzić porządek na stronie. Oto główne:

justify-content: Decyduje, jak ułożyć elementy w poziomie. To jak decyzja, czy postawić słoiki z ogórkami na początku półki, czy równomiernie po całej.
- justify-content: flex-start; — Wszyscy na lewo, jak klienci czekający na otwarcie sklepu.
- justify-content: flex-end; — Wszyscy na prawo, jak rodzice czekający przy drzwiach, kiedy otwierają nową promocję.
- justify-content: center; — Zbierają się na środku, jak klienci przed degustacją serków.
- justify-content: space-between; — Równomiernie rozstawione, jak butelki piwa na półce w piątkowy wieczór.
- justify-content: space-around; — Równy dystans między nimi, jak dystans na kasie w czasach pandemii.
align-items: Wyrównuje elementy w pionie. Spraw, żeby ogórki trzymały pion jak na zawodach sportowych.
- align-items: flex-start; — Wszyscy górą, jak klienci próbujący wyciągnąć ostatnią butelkę z górnej półki.
- align-items: center; — Wszyscy idealnie po środku, jak precyzyjnie ustawione puszki.
- align-items: flex-end; — Wszyscy внизу, jak klienci, którzy czekają na obniżkę cen.

Krok 4: Tworzenie Rzędów i Kolumn – Jak Kolejka do Kasy!

Możesz także zmieniać kierunek swojego Flexbox-układu, używając flex-direction. Ta właściwość decyduje, czy Twoje produkty stoją w rzędzie, czy w kolumnie:

.flex-container {
    display: flex;
    flex-direction: row; /* Domyślnie — ogórki stoją w rzędzie. */
}

.flex-container.kolumna {
    flex-direction: column; /* Teraz stoją w kolumnie, jak w kolejce do kasy. */
}

Spróbuj!

Zmień swój HTML, żeby zobaczyć różnicę:

<div class="flex-container kolumna">
    <div class="box">Ogórek 1</div>
    <div class="box">Ogórek 2</div>
    <div class="box">Ogórek 3</div>
    <div class="box">Ogórek 4</div>
</div>

Teraz ogórki ustawiają się w kolumnie, jak klienci z wózkami na promocji.

Krok 5: Pełny Porządek – Idealny Układ w Stylu Flexbox!

Połączmy wszystko razem w idealny Flexbox-układ. Oto jak powinien wyglądać Twój styles.css:

body {
    font-family: Arial, sans-serif;
}

.flex-container {
    display: flex;
    justify-content: center; /* Wszyscy na środku, jak najlepsze wino na półce. */
    align-items: center; /* Idealnie w linii, jak produkty na otwarcie. */
    flex-wrap: wrap; /* Elastyczne układanie, żeby wszystko zmieścić. */
    gap: 15px; /* Trochę przestrzeni między słoikami, żeby nikt się nie przewrócił. */
    border: 2px solid lightgrey;
    padding: 20px;
    background-color: #f9f9f9; /* Klasyczne tło, jak w luksusowym sklepie. */
}

.box {
    padding: 20px;
    background-color: lightblue;
    color: darkblue;
    font-weight: bold;
    text-align: center;
}

Teraz każdy ogórek на своём месте, як на виставці сільського господарства.

Podsumowanie

Brawo, szefie porządku! Teraz Twoje elementy wiedzą, jak stać prosto i zachowywać się przyzwoicie. Flexbox to jak porządny kierownik sklepu — ustawia wszystko pięknie i sprawia, że każdy element wygląda, jak trzeba.

W następnym уроку poznamy CSS Grid — prawdziwego architekta układów. Jeśli Flexbox to tylko mały sklepik, то CSS Grid — to wielki supermarket z działами, alejkami i