Kompletny Tutorial CSS Flexbox

🎯 Wprowadzenie do Flexbox

CSS Flexbox (Flexible Box Layout) to nowoczesny system layoutu, który pozwala na łatwe tworzenie elastycznych i responsywnych interfejsów. Zastępuje starsze metody jak float czy pozycjonowanie.

Dlaczego Flexbox?

✅ Łatwość użycia

Intuicyjna składnia, mniej kodu niż tradycyjne metody

📱 Responsywność

Automatyczne dostosowywanie do różnych rozdzielczości

🎯 Centrowanie

Łatwe centrowanie w pionie i poziomie

🔄 Elastyczność

Elementy mogą rosnąć i kurczyć się według potrzeb

Wsparcie przeglądarek: Flexbox jest wspierany przez wszystkie nowoczesne przeglądarki (IE 11+, Chrome, Firefox, Safari, Edge).

📚 Podstawy i składnia

Podstawowa struktura

Flexbox składa się z flex container (rodzic) i flex items (dzieci):

/* CSS */
.container {
    display: flex; /* Tworzy flex container */
}

.item {
    /* Automatycznie staje się flex item */
}
                

Item 1

Item 2

Item 3

Osie w Flexbox

Flexbox operuje na dwóch osiach:

Main Axis (oś główna) – domyślnie pozioma
Cross Axis (oś poprzeczna) – prostopadła do głównej

Ważne: Kierunek osi może się zmieniać zależnie od wartości `flex-direction`!

📦 Właściwości flex container

display

display: flex | inline-flex

flex – tworzy blokowy kontener flex
inline-flex – tworzy liniowy kontener flex

flex-direction

flex-direction: row | row-reverse | column | column-reverse

row (domyślnie)

1

2

3

row-reverse

1

2

3

column

1

2

3

column-reverse

1

2

3

justify-content

Kontroluje rozmieszczenie elementów wzdłuż osi głównej:

flex-start

1

2

3

center

1

2

3

space-between

1

2

3

space-evenly

1

2

3

align-items

Kontroluje rozmieszczenie elementów wzdłuż osi poprzecznej:

align-items: stretch | flex-start | flex-end | center | baseline

stretch (domyślnie)

1

2
dłuższy

3

center

1

2
dłuższy

3

flex-start

1

2
dłuższy

3

baseline

1

2

3

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse

nowrap (domyślnie)

Item 1

Item 2

Item 3

Item 4

wrap

Item 1

Item 2

Item 3

Item 4

gap

gap: 10px | 1rem | 20px 10px (row-gap column-gap)

Dodaje przestrzeń między elementami (nowoczesne przeglądarki):

.container {
    display: flex;
    gap: 20px; /* 20px między wszystkimi elementami */
    /* lub */
    gap: 20px 10px; /* 20px między rzędami, 10px między kolumnami */
}
                

Gap 1

Gap 2

Gap 3

🎯 Właściwości flex items

flex-grow

Określa jak bardzo element może rosnąć w stosunku do innych:

flex-grow: 0 | 1 | 2 | 3… (liczba)

grow: 0

grow: 1

grow: 2

.item-1 { flex-grow: 0; } /* Nie rośnie */
.item-2 { flex-grow: 1; } /* Zajmuje 1 część */
.item-3 { flex-grow: 2; } /* Zajmuje 2 części */
                

flex-shrink

Określa jak bardzo element może się kurczyć:

flex-shrink: 1 | 0 | 2… (domyślnie 1)

flex-basis

Określa bazową szerokość elementu przed dystrybucją wolnej przestrzeni:

flex-basis: auto | 100px | 20% | 0

auto

200px

30%

flex (skrót)

Kombinuje grow, shrink i basis:

flex: none | auto | initial | <grow> <shrink> <basis>

/* Najczęściej używane wartości */
.item { flex: 1; }          /* flex: 1 1 0% */
.item { flex: auto; }       /* flex: 1 1 auto */
.item { flex: none; }       /* flex: 0 0 auto */
.item { flex: 0 1 200px; }  /* nie rośnie, kurczy się, bazowa 200px */
                

align-self

Nadpisuje align-items dla konkretnego elementu:

Normal

Center

End

order

Zmienia kolejność elementów bez zmiany HTML:

order: 0 | 1 | -1 | 2… (domyślnie 0)

HTML: 1

HTML: 2

HTML: 3

🛠️ Praktyczne przykłady

Centrowanie elementu

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
                

Wycentrowany!

Nawigacja

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.nav-links {
    display: flex;
    gap: 1rem;
}
                

LOGO

Home

About

Contact

Layout z sidebariem

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    flex: 0 0 250px; /* Nie rośnie, nie kurczy się, 250px szerokości */
}

.main-content {
    flex: 1; /* Zajmuje resztę przestrzeni */
}
                

Sidebar

Main Content

Karty produktów

.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.product-card {
    flex: 1 1 300px; /* Rośnie, kurczy się, min 300px */
    max-width: 400px;
}
                

Produkt 1

Produkt 2

Produkt 3

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main {
    flex: 1; /* Zajmuje całą dostępną przestrzeń */
}

.footer {
    flex-shrink: 0; /* Nie kurczy się */
}
                

🔧 Częste problemy i rozwiązania

Problem: Elementy wykraczają poza kontener

Przyczyna: Domyślnie `flex-shrink: 1` nie zawsze wystarczy

/* Rozwiązanie */
.flex-item {
    min-width: 0; /* Pozwala elementom kurczyć się poniżej naturalnej szerokości */
    overflow: hidden; /* Opcjonalnie */
}
                

Problem: Wysokość elementów nie jest równa

Rozwiązanie: Użyj `align-items: stretch` (domyślne) lub ustaw konkretną wysokość

Problem: Gap nie działa w starszych przeglądarkach

/* Fallback dla starszych przeglądarek */
.flex-item {
    margin-right: 1rem;
}

.flex-item:last-child {
    margin-right: 0;
}

/* Nowoczesne przeglądarki */
.flex-container {
    gap: 1rem;
}

.flex-container .flex-item {
    margin: 0; /* Resetuj marginesy gdy gap jest dostępny */
}
                

Problem: Ostatni rząd w flex-wrap

Zobacz rozwiązania z początku tutoriala!

💡 Porady i triki

Użyteczne kombinacje

Perfekcyjne centrowanie

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
                        

Równe kolumny

.columns {
    display: flex;
}

.column {
    flex: 1;
}
                        

Responsywna siatka

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.item {
    flex: 1 1 250px;
}
                        

Space between z wyjątkami

.container {
    display: flex;
    justify-content: space-between;
}

.container > *:not(:last-child) {
    margin-right: auto;
}
                        

Dobre praktyki

Zawsze testuj w różnych rozdzielczościach
Używaj `gap` zamiast marginów gdy to możliwe
Pamiętaj o `min-width: 0` przy problemach z overflow
Używaj semantycznego HTML niezależnie od layoutu
Testuj w różnych przeglądarkach

Flexbox vs Grid

Używaj Flexbox gdy:

Układasz elementy w jednym wymiarze
Potrzebujesz elastyczności rozmiaru
Robisz komponenty (nawigacja, karty)
Centrujesz elementy

Używaj Grid gdy:

Układasz elementy w dwóch wymiarach
Robisz kompleksowe layouty
Potrzebujesz precyzyjnej kontroli
Masz złożoną siatkę

Protip: Flexbox i Grid świetnie współpracują razem! Użyj Grid do ogólnego layoutu strony, a Flexbox do komponentów.

🎓 Podsumowanie

CSS Flexbox to potężne narzędzie, które znacznie ułatwia tworzenie nowoczesnych layoutów. Kluczowe punkty do zapamiętania:

🎯 Container

display: flex
justify-content (oś główna)
align-items (oś poprzeczna)
flex-direction, flex-wrap, gap

📦 Items

flex: 1 (najczęściej używane)
flex-grow, flex-shrink, flex-basis
align-self
order

🚀 Ćwicz Flexbox!

Najlepszy sposób nauki to praktyka. Spróbuj tych narzędzi:

Flexbox Froggy – gra do nauki flexbox
Flexbox Defense – tower defense z flexbox
CSS-Tricks Flexbox Guide – kompletny przewodnik
DevTools – eksperymentuj w przeglądarce

🎉 Gratulacje! Teraz znasz CSS Flexbox! 🎉

🚀 CSS Flexbox

📋 Spis treści

🎯 Wprowadzenie do Flexbox

Dlaczego Flexbox?

✅ Łatwość użycia

📱 Responsywność

🎯 Centrowanie

🔄 Elastyczność

📚 Podstawy i składnia

Podstawowa struktura

Osie w Flexbox

📦 Właściwości flex container

display

flex-direction

justify-content

align-items

flex-wrap

gap

🎯 Właściwości flex items

flex-grow

flex-shrink

flex-basis

flex (skrót)

align-self

order

🛠️ Praktyczne przykłady

Centrowanie elementu

Nawigacja

Layout z sidebariem

Karty produktów

Sticky footer

🔧 Częste problemy i rozwiązania

Problem: Elementy wykraczają poza kontener

Problem: Wysokość elementów nie jest równa

Problem: Gap nie działa w starszych przeglądarkach

Problem: Ostatni rząd w flex-wrap

💡 Porady i triki

Użyteczne kombinacje

Perfekcyjne centrowanie

Równe kolumny

Responsywna siatka

Space between z wyjątkami

Dobre praktyki

Flexbox vs Grid

Używaj Flexbox gdy:

Używaj Grid gdy:

🎓 Podsumowanie

🎯 Container

📦 Items

🚀 Ćwicz Flexbox!

Dodaj komentarz Anuluj pisanie odpowiedzi

O mnie

Najnowsze komentarze

Najnowsze wpisy

Tagi