Flexbox, czyli Flexible Box Layout, to jeden z najpotężniejszych i najbardziej elastycznych modeli układów dostępnych w CSS3. Zaprojektowany, aby ułatwić projektowanie responsywnych układów stron internetowych, Flexbox pozwala na efektywne zarządzanie przestrzenią pomiędzy elementami w kontenerze, zarówno w pionie, jak i w poziomie.
Podstawowe koncepcje Flexbox:
- Flex Container: Kontener, na którym stosowana jest właściwość
display: flex;
lubdisplay: inline-flex;
, staje się flex kontenerem. - Flex Items: Bezpośrednie dzieci flex kontenera stają się automatycznie elementami flex (flex items).
- Main Axis i Cross Axis: W Flexboxie można zdefiniować główną oś (main axis), wzdłuż której układane są elementy, oraz poprzeczną oś (cross axis) – prostopadłą do głównej osi.
Kluczowe właściwości Flexbox:
- display: Ustawienie
flex
lubinline-flex
tworzy flex kontener. - flex-direction: Określa kierunek głównej osi (np.
row
,column
). - justify-content: Definiuje wyrównanie elementów wzdłuż głównej osi.
- align-items: Określa wyrównanie elementów wzdłuż osi poprzecznej.
- flex-wrap: Pozwala elementom na zawijanie się, jeśli nie mieszczą się w jednym rzędzie lub kolumnie.
- align-content: Wyrównuje linie wewnątrz flex kontenera, gdy jest więcej miejsca na osi poprzecznej.
- flex-grow, flex-shrink, flex-basis: Kontrolują rozmiar elementów flex w zależności od dostępnej przestrzeni.
Przykład użycia Flexbox:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Flexbox w CSS</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background-color: lightgrey;
}
.flex-item {
background-color: deepskyblue;
padding: 10px;
margin: 5px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
</body>
</html>
Podsumowanie
Flexbox oferuje prosty i potężny sposób na tworzenie dynamicznych, responsywnych układów bez konieczności stosowania złożonych hacków czy floatów. Dzięki intuicyjnej kontroli nad rozmieszczeniem elementów, zarówno w pionie, jak i w poziomie, Flexbox stał się nieodzownym narzędziem w arsenale każdego front-end developera. Pozwala on na szybkie i efektywne tworzenie układów, które dostosowują się do różnych rozmiarów ekranu, ułatwiając tworzenie nowoczesnych stron internetowych.
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.