CSS Flexbox - przewodnik po układach elastycznych

Czym jest CSS Flexbox?

CSS Flexbox (Flexible Box Layout) to metoda układania elementów, która pozwala na tworzenie elastycznych i responsywnych interfejsów. Jest idealnym rozwiązaniem do wyrównywania elementów i rozkładania przestrzeni w kontenerze.

Podstawowe pojęcia

• Flex Container - element z display: flex
• Flex Items - bezpośrednie dzieci kontenera flex
• Main Axis - główna oś (domyślnie pozioma)
• Cross Axis - oś poprzeczna (domyślnie pionowa)

Podstawowa składnia

.kontener {
    display: flex;
}

/* Elementy są teraz układane w rzędzie */

Właściwości dla kontenera (Flex Container)

flex-direction

Określa kierunek głównej osi:

.kontener {
    display: flex;
    flex-direction: row; /* default - poziomo */
    /* flex-direction: column; - pionowo */
    /* flex-direction: row-reverse; - poziomo odwrócone */
    /* flex-direction: column-reverse; - pionowo odwrócone */
}

justify-content

Wyrównuje elementy wzdłuż głównej osi:

.kontener {
    display: flex;
    justify-content: flex-start; /* default - na początku */
    /* justify-content: flex-end; - na końcu */
    /* justify-content: center; - wyśrodkowane */
    /* justify-content: space-between; - równe odstępy między */
    /* justify-content: space-around; - równe odstępy dookoła */
    /* justify-content: space-evenly; - idealnie równe odstępy */
}

align-items

Wyrównuje elementy wzdłuż osi poprzecznej:

.kontener {
    display: flex;
    align-items: stretch; /* default - rozciąga do wysokości kontenera */
    /* align-items: flex-start; - na górze */
    /* align-items: flex-end; - na dole */
    /* align-items: center; - wyśrodkowane */
    /* align-items: baseline; - według linii bazowej tekstu */
}

flex-wrap

Kontroluje zawijanie elementów:

.kontener {
    display: flex;
    flex-wrap: nowrap; /* default - nie zawija */
    /* flex-wrap: wrap; - zawija do nowej linii */
    /* flex-wrap: wrap-reverse; - zawija w odwrotnym kierunku */
}

Właściwości dla elementów (Flex Items)

flex-grow

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

.element {
    flex-grow: 1; /* element zajmie dostępną przestrzeń */
}

.duzy-element {
    flex-grow: 2; /* zajmie dwa razy więcej przestrzeni */
}

flex-shrink

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

.element {
    flex-shrink: 1; /* default - może się kurczyć */
    /* flex-shrink: 0; - nie będzie się kurczyć */
}

flex-basis

Określa początkową wielkość elementu:

.element {
    flex-basis: 200px; /* początkowa szerokość 200px */
    /* flex-basis: auto; - na podstawie zawartości */
}

flex (skrócona forma)

.element {
    flex: 1; /* równoważne flex: 1 1 0; */
    /* flex: grow shrink basis */
    flex: 0 1 auto; /* default */
}

align-self

Nadpisuje align-items dla pojedynczego elementu:

.specjalny-element {
    align-self: flex-end; /* tylko ten element na dole */
}

Praktyczne przykłady

Centrowanie elementu

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

/* Element będzie idealnie wyśrodkowany */

Równe kolumny

.kontener {
    display: flex;
}

.kolumna {
    flex: 1; /* wszystkie kolumny tej samej szerokości */
    padding: 20px;
}

Navbar z przestrzenią

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.logo {
    /* logo po lewej */
}

.menu {
    /* menu po prawej */
}

Sticky footer

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

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

.footer {
    /* footer zawsze na dole */
}

Responsywność z Flexbox

.kontener {
    display: flex;
    flex-wrap: wrap;
}

.element {
    flex: 1 1 300px; /* minimum 300px, może rosnąć */
}

@media (max-width: 768px) {
    .kontener {
        flex-direction: column;
    }
}

Najczęstsze błędy

1. Zapominanie o flex-wrap - elementy się nie zawijają
2. Niewłaściwe użycie flex-basis - konflikty z width/height
3. Nadużywanie flex-grow - nieprzewidywalne rozmiary
4. Ignorowanie min-width/max-width - elementy mogą być za małe/duże

Kiedy używać Flexbox?

• Układy jednowymiarowe (rzędy lub kolumny)
• Wyrównywanie elementów
• Rozkład przestrzeni między elementami
• Komponenty UI (navbar, card, button group)

Dla układów dwuwymiarowych (siatki) lepiej używać CSS Grid.

Podsumowanie

CSS Flexbox to potężne narzędzie do tworzenia elastycznych układów. Opanowanie jego właściwości pozwoli Ci tworzyć responsywne i profesjonalne interfejsy z łatwością. Pamiętaj o praktyce - eksperymentuj z różnymi wartościami i obserwuj jak wpływają na układ.