Trójkolumnowy Responsywny Układ w CSS3 z Flexbox i Media Queries

By /

CSS

W dzisiejszej lekcji nauczymy się, jak stworzyć trójkolumnowy responsywny układ strony internetowej, wykorzystując CSS Flexbox i Media Queries. Ten rodzaj układu jest idealny dla stron typu blog czy portalu informacyjnego, gdzie chcemy mieć główną treść w środku i dodatkowe informacje lub menu po bokach.

Rozpoczęcie:

Flexbox to system układu CSS, który umożliwia łatwe zarządzanie układem elementów, nawet gdy ich rozmiar jest nieznany lub dynamiczny. Połączenie Flexboxa z Media Queries pozwala na tworzenie układów, które dostosowują się do szerokości ekranu urządzenia, na którym są wyświetlane.

Struktura HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Trójkolumnowy Responsywny Układ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="sidebar" id="left-sidebar">Lewy Sidebar</div>
        <div class="main-content">Główna Treść</div>
        <div class="sidebar" id="right-sidebar">Prawy Sidebar</div>
    </div>
</body>
</html>

Styl CSS z Flexbox i Media Queries:

.container {
    display: flex;
    flex-wrap: wrap;
}

.sidebar {
    flex: 1;
    padding: 10px;
    background-color: lightblue;
}

.main-content {
    flex: 2;
    padding: 10px;
    background-color: lightcoral;
}

/* Media Queries */
@media (max-width: 800px) {
    .sidebar {
        flex: 100%;
    }
    .main-content {
        flex: 100%;
    }
}

Omówienie:

  • .container: Jest to kontener Flexbox, który zawiera trzy elementy: dwa sidebary (#left-sidebar i #right-sidebar) oraz główną treść (main-content). Dzięki flex-wrap: wrap;, elementy mogą przenosić się do nowej linii, gdy nie ma dla nich wystarczająco miejsca w jednej linii.
  • .sidebar i .main-content: Elementy te mają przydzielone wartości flex, które określają, jak dużą część kontenera mają zajmować. Główna treść zajmuje dwa razy więcej miejsca niż każdy z sidebarów.
  • Media Queries: Gdy szerokość ekranu spada poniżej 800px, wszystkie elementy (sidebar i główna treść) zmieniają swój rozmiar na 100%. Oznacza to, że każdy element zajmuje pełną szerokość ekranu i układa się jeden pod drugim, co jest bardziej odpowiednie dla wąskich ekranów, takich jak te w telefonach komórkowych.

Podsumowanie:

Stworzenie trójkolumnowego responsywnego układu przy użyciu Flexbox i Media Queries w CSS3 jest prostym i skutecznym sposobem na zaprojektowanie strony, która wygląda dobrze na każdym urządzeniu. Kluczową zaletą jest elastyczność i możliwość dostosowania układu do rozmiaru ekranu, co jest niezbędne w dzisiejszym zróżnicowanym środowisku urządzeń internetowych. Dzięki responsywnemu projektowaniu, możemy zapewnić wszystkim użytkownikom optymalne doświadczenie przeglądania naszej strony.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top