Układ 3 kolumnowy z Flexbox

By /

Html CSS

Flexbox to idealne narzędzie do tworzenia responsywnych układów stron internetowych, w tym popularnego układu 3-kolumnowego. Taki układ może składać się z głównej zawartości umieszczonej centralnie i dwóch kolumn (sidebarów) po bokach, które mogą zawierać menu, informacje dodatkowe, linki itp.

Struktura HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Układ 3-kolumnowy z Flexbox</title>
    <style>
        /* Stylowanie kontenera */
        .container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        
        /* Stylowanie kolumn */
        .column {
            flex: 1; /* Rozciąga kolumny, aby zajmowały równą przestrzeń */
            padding: 20px;
        }
        
        /* Specyficzne stylowanie dla głównej kolumny */
        .main-column {
            flex: 2; /* Główna kolumna będzie dwa razy 
                     szersza niż boczne kolumny */
        }
        
        /* Dodatkowe stylowanie dla przykładu */
        .sidebar {
            background-color: lightblue;
        }
        
        .main-column {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column sidebar">Sidebar 1</div>
        <div class="column main-column">Główna zawartość</div>
        <div class="column sidebar">Sidebar 2</div>
    </div>
</body>
</html>

Opis działania:

  1. Kontener Flex: Ustawiamy .container jako flex kontener z właściwością display: flex;, co sprawia, że wszystkie dzieci (kolumny) są układane w poziomie.
  2. Jednakowe rozciąganie kolumn: Przy użyciu flex: 1; na elementach .column, każda z bocznych kolumn zajmuje równą przestrzeń.
  3. Główna kolumna: Przy użyciu flex: 2; na .main-column, główna kolumna zajmuje dwukrotnie więcej przestrzeni niż każda z bocznych kolumn.
  4. Estetyka: Dodano proste stylowanie kolorystyczne, aby lepiej zobrazować układ kolumn.

Podsumowanie:

Flexbox ułatwia tworzenie elastycznych i responsywnych układów strony bez potrzeby stosowania skomplikowanych hacków CSS czy nadmiernego używania zewnętrznych bibliotek. Układ 3-kolumnowy zrealizowany z Flexboxem jest tylko jednym z wielu przykładów, jak można efektywnie wykorzystać tę technologię do tworzenia nowoczesnych, responsywnych interfejsów użytkownika. Dzięki swojej elastyczności, Flexbox stanowi doskonałe narzędzie do tworzenia layoutów, które dostosowują się do różnych rozmiarów ekranu i potrzeb użytkowników.

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

Powiązane artykuły

Scroll to Top