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ękiflex-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.