Flexbox - wprowadzenie
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
1. Co to jest Flexbox?
Flexbox (Flexible Box Layout) to nowoczesny model układu elementów w CSS, zaprojektowany po to, aby w prosty i przewidywalny sposób tworzyć elastyczne układy na stronie. Ułatwia rozmieszczanie, wyrównywanie oraz zmienianie rozmiarów elementów w jednym wymiarze — w linii poziomej lub pionowej.
Dlaczego używamy Flexbox?
- pozwala łatwo centrować elementy (zarówno poziomo jak i pionowo),
- automatycznie dopasowuje elementy do dostępnego miejsca,
- zastępuje skomplikowane układy oparte na float i inline-block,
- świetnie sprawdza się w responsywnych projektach.
2. Do czego stosujemy Flexbox?
Flexbox jest idealny, gdy chcemy:
- układać elementy w rzędzie lub kolumnie,
- kontrolować odstępy między elementami,
- wyrównywać elementy do środka, początku lub końca kontenera,
- tworzyć dynamiczne komponenty (np. menu, galerie, karty),
- łatwo zarządzać proporcjami elementów przy zmianie rozmiaru okna.
3. Jak zbudowany jest Flexbox?
Flexbox składa się z dwóch ról:
1. Kontener Flex (flex container)
Element, na którym ustawiamy display: flex.
To on steruje układem swoich dzieci.
2. Elementy Flex (flex items)
Wszystkie elementy bezpośrednio w środku kontenera.
Można je niezależnie wyrównywać i skalować.
4. Najważniejsze właściwości Flexboxa
Właściwości kontenera:
| Właściwość | Opis |
|---|---|
display: flex | aktywuje tryb flexbox |
flex-direction | określa kierunek ułożenia elementów (row, row-reverse, column, column-reverse) |
justify-content | wyrównanie elementów po głównej osi (np. do środka, na koniec, odstępy – używamy tutaj właściwości: flex-end, flex-start, center, space-around, space-between, space-evenly) |
align-items | wyrównanie elementów po osi poprzecznej |
flex-wrap | czy elementy mają się zawijać do kolejnych linii |
gap | odstępy między elementami |
Właściwości elementów flex:
| Właściwość | Opis |
|---|---|
flex-grow | jak bardzo element ma się rozszerzać |
flex-shrink | jak bardzo może się kurczyć |
flex-basis | początkowy rozmiar elementu |
flex | skrót: grow shrink basis |
align-self | indywidualne wyrównanie elementu |
Przykład do wykonania na zajęciach:
Zbuduj nst strukturę strony:
<section class=”container”>
<div class=”box”>1</div>
<div class=”box”>2</div>
<div class=”box”>3</div>
</section>
W CSS ustaw:
.container {
display: flex; /* aktywacja Flexboxa */
flex-direction: row; /* układ w poziomie */
justify-content: center; /* wyśrodkowanie elementów w poziomie */
align-items: center; /* wyśrodkowanie elementów w pionie */
gap: 20px; /* odstępy między elementami */
height: 200px;
background: #eee;
}
.box {
width: 80px;
height: 80px;
background: #4da3ff;
color: white;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
Efekt końcowy:
