Flexbox, oficjalnie znany jako Flexible Box Layout, to potężny model układu w CSS3, który pozwala na łatwe zarządzanie układem, wyrównaniem i rozmiarami elementów w kontenerze, nawet gdy ich rozmiar jest nieznany lub dynamiczny. Jest idealny do tworzenia responsywnych układów stron internetowych. W tej lekcji przejdziemy przez podstawy flexboxa, opisując różne właściwości i jak mogą być wykorzystane do budowania elastycznych układów.
Przykład zastosowania flexboxa
Poniżej znajduje się przykład kodu HTML i CSS, który ilustruje podstawowe zastosowanie flexboxa do centrowania elementów w kontenerze, zarówno w pionie, jak i poziomie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład Flexbox w CSS3</title>
<style>
/* Styl dla kontenera flex */
.flex-container {
display: flex; /* Włącza flexbox dla tego kontenera */
justify-content: center; /* Centruje elementy poziomo */
align-items: center; /* Centruje elementy pionowo */
height: 200px; /* Wysokość kontenera */
border: 1px solid #000; /* Ramka kontenera */
}
/* Styl dla elementów wewnątrz kontenera flex */
.flex-item {
width: 100px; /* Szerokość elementu */
height: 100px; /* Wysokość elementu */
background-color: lightblue; /* Kolor tła elementu */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div> <!-- Element flex -->
</div>
</body>
</html>
W tym przykładzie, .flex-container
jest kontenerem flex, który używa display: flex;
do włączenia modelu flexbox. Właściwość justify-content: center;
centruje elementy w poziomie, a align-items: center;
w pionie, umieszczając .flex-item
w środku kontenera.
Właściwości Flexboxa
Flexbox oferuje szereg właściwości, które można zastosować zarówno do kontenerów flex (flex containers), jak i ich dzieci (flex items). Oto niektóre z kluczowych właściwości:
display: flex;
: Włącza model flexbox dla kontenera.flex-direction
: Określa główny kierunek osi flex (np.row
,column
).justify-content
: Wyrównuje elementy wzdłuż głównej osi (np.center
,space-between
).align-items
: Wyrównuje elementy wzdłuż osi poprzecznej (np.center
,stretch
).flex-wrap
: Pozwala elementom na zawijanie się w kontenerze (np.wrap
,nowrap
).flex-flow
: Skrócona właściwość dlaflex-direction
iflex-wrap
.align-content
: Wyrównuje linie flex w kontenerze, gdy jest więcej miejsca na osi poprzecznej (np.space-around
,stretch
).flex-grow
,flex-shrink
,flex-basis
: Właściwości pozwalające kontrolować rozmiar elementów flex.
Podsumowanie
Flexbox to niezwykle potężne narzędzie w CSS3, które upraszcza tworzenie responsywnych układów stron internetowych. Dzięki intuicyjnym właściwościom umożliwia deweloperom efektywne zarządzanie przestrzenią i wyrównaniem elementów wewnątrz kontenera.
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.