Flexbox, czyli Flexible Box Module, to potężne narzędzie w CSS3, umożliwiające łatwe projektowanie elastycznych układów strony bez użycia zewnętrznych bibliotek czy hacków. Flexbox pozwala na efektywne zarządzanie przestrzenią między elementami na stronie, ich wyrównanie, a także określenie kolejności ich wyświetlania. W tej lekcji omówimy podstawowe właściwości Flexboxa i pokażemy, jak mogą być wykorzystane do tworzenia responsywnych układów strony.
Przykład użycia Flexbox
Poniżej znajdziesz kompletny przykład kodu HTML i CSS, ilustrujący użycie Flexboxa do stworzenia prostej strony z wyśrodkowanymi elementami.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout w Flexbox</title>
<style>
/* Styl dla kontenera Flex */
.flex-container {
display: flex; /* Aktywacja Flexboxa */
justify-content: center; /* Centruje elementy poziomo */
align-items: center; /* Centruje elementy pionowo */
height: 100vh; /* Wysokość na cały ekran */
flex-direction: column; /* Ustawienie kierunku elementów na pionowy */
}
/* Styl dla elementów wewnątrz kontenera Flex */
.flex-item {
margin: 10px; /* Odstęp między elementami */
padding: 20px; /* Wewnętrzny odstęp dla elementów */
border: 1px solid #000; /* Ramka dookół elementów */
background-color: lightblue; /* Kolor tła dla elementów */
}
</style>
</head>
<body>
<div class="flex-container">
<!-- Elementy Flex -->
<div class="flex-item">Element 1</div>
<div class="flex-item">Element 2</div>
<div class="flex-item">Element 3</div>
</div>
</body>
</html>
W tym przykładzie, .flex-container jest kontenerem Flex, który używa właściwości display: flex; do aktywacji Flexboxa. Właściwości justify-content: center; i align-items: center; służą do wyśrodkowania elementów zarówno poziomo, jak i pionowo. flex-direction: column; zmienia kierunek elementów na pionowy.
Możliwe wartości i ich znaczenie
display: flex;– aktywuje Flexbox dla kontenera.flex-direction: row | row-reverse | column | column-reverse;– określa kierunek elementów flex: poziomo (row), poziomo w odwrotnej kolejności (row-reverse), pionowo (column) lub pionowo w odwrotnej kolejności (column-reverse).justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;– zarządza rozmieszczeniem elementów wzdłuż głównej osi (poziomo): na początku (flex-start), na końcu (flex-end), wyśrodkowane (center), z równymi odstępami między (space-between), z równymi odstępami dookoła (space-around) lub z równymi odstępami między i dookoła (space-evenly).align-items: flex-start | flex-end | center | baseline | stretch;– zarządza rozmieszczeniem elementów wzdłuż osi krzyżowej (pionowo): na początku (flex-start), na końcu (flex-end), wyśrodkowane (center), wzdłuż linii bazowej tekstu (baseline) lub rozciągnięte do wypełnienia kontenera (stretch).- `align-content: flex-start | flex-end | center | space-between
- | space-around | stretch;` – stosuje się tylko gdy jest więcej niż jedna linia elementów flex. Zarządza przestrzenią między liniami: na początku (flex-start), na końcu (flex-end), wyśrodkowane (center), z równymi odstępami między liniami (space-between), z równymi odstępami dookoła linii (space-around) lub rozciągnięte, aby wypełnić kontener (stretch).
flex-wrap: nowrap | wrap | wrap-reverse;– określa, czy elementy powinny być zawijane do nowej linii: nie zawijaj (nowrap), zawijaj (wrap), zawijaj w odwrotnej kolejności (wrap-reverse).flex-grow: <number>;– definiuje zdolność elementu do rozrostu w stosunku do pozostałych elementów w kontenerze.flex-shrink: <number>;– określa zdolność elementu do kurczenia się w stosunku do pozostałych elementów, jeśli jest to konieczne.flex-basis: <length> | auto;– określa domyślny rozmiar elementu przed dodaniem dodatkowej przestrzeni przezflex-grow.flex: <flex-grow> <flex-shrink> <flex-basis>;– skrócona notacja dla trzech powyższych właściwości.order: <number>;– pozwala na kontrolę kolejności wyświetlania elementów flex, niezależnie od ich kolejności w kodzie HTML.
Przykład zastosowania zaawansowanych właściwości Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zaawansowany przykład Flexbox</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap; /* Pozwala elementom na zawijanie */
justify-content: space-around; /* Równomierny odstęp dookoła elementów */
height: 100vh;
}
.flex-item {
flex: 1 1 150px; /* Rozrost, kurczenie i bazowa szerokość elementu */
margin: 10px;
background-color: lightcoral;
text-align: center; /* Wyśrodkowanie tekstu w elemencie */
padding: 20px;
}
.flex-item:nth-child(odd) {
background-color: lightseagreen; /* Różne kolory dla parzystych i nieparzystych elementów */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Element 1</div>
<div class="flex-item">Element 2</div>
<div class="flex-item">Element 3</div>
<div class="flex-item">Element 4</div>
<div class="flex-item">Element 5</div>
<div class="flex-item">Element 6</div>
</div>
</body>
</
W tym zaawansowanym przykładzie użyto właściwości flex-wrap do zawijania elementów do nowej linii, gdy nie mieszczą się one w jednym rzędzie. Wartość space-around dla justify-content zapewnia równomierny odstęp dookoła elementów. Właściwość flex jest użyta do określenia, jak elementy powinny rosnąć, kurczyć się i jaki mają mieć bazowy rozmiar. Dodatkowo, zastosowano selektor :nth-child do zmiany koloru tła dla parzystych i nieparzystych elementów, co dodaje ciekawy wizualny efekt.
Podsumowanie
Flexbox jest niezwykle potężnym i elastycznym narzędziem do tworzenia responsywnych układów strony. Dzięki zrozumieniu i umiejętnemu stosowaniu właściwości Flexbox, można łatwo tworzyć złożone, dobrze wyglądające i funkcjonalne układy strony, które dostosowują się do różnych rozmiarów ekranu i urządzeń. Korzystając z Flexboxa, deweloperzy i projektanci są w stanie przezwyciężyć wiele wyzwań związanych z układem strony, takich jak wyrównywanie zawartości, zarządzanie przestrzenią między elementami oraz tworzenie dynamicznie dostosowujących się układów bez konieczności stosowania złożonego i skomplikowanego CSS lub JavaScript.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.