logo
  • Egzaminy
  • Quizy
  • Gry
  • Blog
  • Pytania
  • Kursy
  • Korepetycje
logo Mobile
logo Mobile
Logo sienaucze.pl

Rozwijaj swoje umiejętności z nami – odkryj kursy, materiały edukacyjne i wspierającą społeczność.

Platforma

Kursy
Baza pytań
Korepetycje
Narzędzia

Egzaminy

Prawo jazdy kategoria D
Prawo jazdy kategoria B1
Prawo jazdy kategoria C1
Technik informatyk INF.02

O nas

Nasz zespół
Blog
Kontakt

Wsparcie i Zasady

FAQ
Dokumentacja
Regulamin
Polityka prywatności
Logo sienaucze.pl

Rozwijaj swoje umiejętności z nami – odkryj kursy, materiały edukacyjne i wspierającą społeczność.

Platforma

KursyBaza pytańKorepetycjeNarzędzia

Egzaminy

Prawo jazdy kategoria DPrawo jazdy kategoria B1Prawo jazdy kategoria C1Technik informatyk INF.02

O nas

Nasz zespółBlogKontakt

Wsparcie i Zasady

FAQDokumentacjaRegulaminPolityka prywatności

© 2025 sienaucze.pl. Wszelkie prawa zastrzeżone. Strona zrealizowana przez Wiktor Józwiak oraz Błażej Walkowiak

InstagramFacebookYouTube
Jak pociąć grafikę na INF.03? Flexbox i Grid w 15 minut. | Najlepsza platforma do nauki online
BlogPoradniki Techniczne

Jak pociąć grafikę na INF.03? Flexbox i Grid w 15 minut.

W
Wiktor Józwiak
4 czerwca 2025·2 min czytania
Jak pociąć grafikę na INF.03? Flexbox i Grid w 15 minut.
Jak pociąć grafikę na INF.03? Flexbox i Grid w 15 minut.

📐 Klasyczny Układ Egzaminacyjny

90% arkuszy INF.03 ma ten sam schemat:

  1. Nagłówek (Header): Na całą szerokość.
  2. Panel Lewy i Prawy: Dwie kolumny obok siebie (czasem 3).
  3. Stopka (Footer): Na całą szerokość.

Jak to zrobić, żeby się nie rozjechało? Zapomnij o float: left. Witamy w erze Flexboxa.

Rozwiązanie Flexbox (Najbezpieczniejsze)

Struktura HTML:

<header>Baner</header>
<main>
    <section id="lewy">Lewy</section>
    <section id="prawy">Prawy</section>
</main>
<footer>Stopka</footer>

CSS Krok po Kroku

  1. Kontener Główny (main): To on trzyma kolumny w ryzach.

    main {
...
...
...
TwitterFacebook
inf.03cssflexboxhtmlfrontend
Poprzedni post

INF.03: Logowanie i Sesje w PHP. Jak to zrobić bezpiecznie na egzaminie?

Następny post

Jak efektywnie uczyć się programowania od zera? Poradnik dla początkujących

Ładowanie komentarzy...

Spis treści

Spis treści

Brak nagłówków w tym artykule.

Spis treści

Brak nagłówków w tym artykule.

Informacje

AutorWiktor Józwiak
Data4 czerwca 2025
Czas5 min
KategoriaPoradniki Techniczne

Tagi

#inf.03#css#flexbox#html#frontend

Czytaj dalej

Powiązane artykuły

Zobacz wszystkie
INF.02: Adresacja IP, maski i podsieci - Poradnik dla opornych
Poradniki Techniczne

INF.02: Adresacja IP, maski i podsieci - Poradnik dla opornych

Oktety, binarki, CIDR... Brzmi strasznie? Wytłumaczę Ci adresację IP tak prosto, że policzysz podsieci w pamięci. Obowiązkowe na INF.02.

Wiktor Józwiak15 maj 2025
INF.02: Linux na 100%. Komendy, użytkownicy i uprawnienia - Mega Poradnik
Poradniki Techniczne

INF.02: Linux na 100%. Komendy, użytkownicy i uprawnienia - Mega Poradnik

Boisz się konsoli? Niepotrzebnie. Opanuj zarządzanie użytkownikami, grupami i uprawnieniami (chmod/chown) w Linuxie. To pewne punkty na egzaminie INF.02.

Julia Majewska10 maj 2025
INF.02: Diagnostyka i montaż komputera. Co musisz wiedzieć?
Poradniki Techniczne

INF.02: Diagnostyka i montaż komputera. Co musisz wiedzieć?

Śrubokręt w dłoń! Procedura montażu, kody błędów POST i BHP w pracowni. Zobacz, jak nie spalić płyty głównej na egzaminie.

Julia Majewska20 maj 2025
Windows Server na INF.02: Active Directory, GPO i Użytkownicy. Poradnik Krok po Kroku.
Poradniki Techniczne

Windows Server na INF.02: Active Directory, GPO i Użytkownicy. Poradnik Krok po Kroku.

Active Directory to zmora wielu zdających. Zobacz, jak promować serwer do kontrolera domeny, tworzyć użytkowników i zarządzać politykami GPO. Gotowe solucje.

Wiktor Józwiak3 cze 2025
display: flex;
/* Domyślnie flex ustawia elementy obok siebie (row) */
}

  • Kolumny: Nadaj im szerokość procentową.

    #lewy {
    width: 30%; /* Np. menu */
    height: 500px;
    background-color: #eee;
}
#prawy {
    width: 70%; /* Np. treść */
    height: 500px;
    background-color: #ddd;
}

    Ważne: Suma szerokości nie musi dawać 100%, jeśli chcesz odstępy, ale na egzaminie zazwyczaj elementy przylegają do siebie.

    • 📏 Pułapki, które zabierają punkty

    1. Padding psuje szerokość

    Jeśli nadasz width: 30% i padding: 20px, to element będzie szerszy niż 30% (bo 30% + 40px). Wszystko się rozjedzie.

    Rozwiązanie: Magiczna komenda na początku CSS:

    * {
    box-sizing: border-box;
}

    To sprawia, że padding "wchodzi do środka" i nie powiększa elementu.

    2. Marginesy body

    Przeglądarka domyślnie dodaje margines do strony (około 8px), przez co widać białe paski na brzegach. Rozwiązanie:

    body {
    margin: 0;
    font-family: Arial, sans-serif; /* Częsty wymóg */
}

    Układ 3-kolumnowy (Środek, Lewo, Prawo)

    Też proste.

    main {
    display: flex;
}
.kolumna {
    /* Wszystkie równe? */
    flex: 1; 
    height: 400px;
}

    Jeśli mają mieć różne szerokości, użyj procentów (np. 20%, 60%, 20%).

    Kiedy użyć CSS Grid?

    Grid jest świetny, gdy układ jest bardziej "kratkowany" (np. galeria zdjęć 3x3).

    #galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 równe kolumny */
    gap: 10px; /* Odstępy między zdjęciami */
}

    To wystarczy, żeby obrazki same się ułożyły. Nie musisz kombinować z marginesami.

    🧩

    Sprawdź wiedzę o CSS

    Wiesz co robi justify-content: center? Przetestuj się w naszych quizach z projektowania stron.

    Quiz CSS

    Podsumowanie

    Na egzaminie INF.03 nie musisz robić responsywności (RWD), chyba że wyraźnie o to poproszą (rzadkość). Skup się na tym, aby na monitorze egzaminacyjnym (zazwyczaj 1920x1080) strona wyglądała identycznie jak na zrzucie w arkuszu. display: flex to Twój najlepszy przyjaciel.