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:
- 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. - Jednakowe rozciąganie kolumn: Przy użyciu
flex: 1;
na elementach.column
, każda z bocznych kolumn zajmuje równą przestrzeń. - 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. - 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.