Podstawy Flexboxa – kontener i elementy flex (Flex – część 2)

W poprzedniej części poznaliśmy ideę stojącą za Flexboksem – dlaczego powstał i co rozwiązuje. Teraz pora zejść na poziom kodu i zobaczyć, jak zbudowany jest Flexbox od środka. W tej części skupimy się na kontenerze i jego bezpośrednich dzieciach, czyli elementach typu „flex item”.

🔍 Kontener vs elementy flex

Aby Flexbox zadziałał, potrzebujemy dwóch rzeczy:

kontenera flex, czyli elementu nadrzędnego,
elementów flex, czyli jego dzieci.

Gdy ustawimy display: flex lub display: inline-flex na elemencie, staje się on kontenerem flex. Wszystkie jego bezpośrednie dzieci (czyli nie wnuki czy prawnuki!) stają się elementami flex.

<div class="kontener">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
</div>

<div>Element 1</div>

<div>Element 2</div>

<div>Element 3</div>

</div>

.kontener {
  display: flex;
}

.kontener {

display: flex;

}

➡️ Teraz .kontener to kontener flex, a trzy divy w środku to elementy flex.

🧾 display: flex vs display: inline-flex

display: flex – kontener zachowuje się jak blok (czyli zajmuje całą szerokość).
display: inline-flex – kontener zachowuje się jak element inline (np. span), ale wewnątrz nadal działa flexbox.

.flex-blokowy {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}

.flex-blokowy {

display: flex;

}

.flex-inline {

display: inline-flex;

}

↔️ Oś główna i poprzeczna

Aby lepiej zrozumieć działanie Flexboxa, trzeba poznać pojęcie osi:

Oś główna (main axis) – domyślnie pozioma, czyli od lewej do prawej.
Oś poprzeczna (cross axis) – domyślnie pionowa, czyli od góry do dołu.

Te osie można odwrócić za pomocą właściwości flex-direction.

🔁 flex-direction – zmiana kierunku

.kontener {
  display: flex;
  flex-direction: row;       /* domyślnie: poziomo, z lewej na prawą */
  flex-direction: row-reverse;  /* poziomo, z prawej na lewą */
  flex-direction: column;    /* pionowo, z góry na dół */
  flex-direction: column-reverse; /* pionowo, z dołu do góry */
}

.kontener {

display: flex;

flex-direction: row; /* domyślnie: poziomo, z lewej na prawą */

flex-direction: row-reverse; /* poziomo, z prawej na lewą */

flex-direction: column; /* pionowo, z góry na dół */

flex-direction: column-reverse; /* pionowo, z dołu do góry */

}

🧻 flex-wrap – zawijanie elementów

Domyślnie Flexbox nie zawija elementów. Jeśli jest ich za dużo, będą się ściskać w jednej linii. Możesz to zmienić:

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

.kontener {

display: flex;

flex-wrap: wrap;

}

Dostępne wartości:

nowrap (domyślnie) – wszystko w jednej linii
wrap – zawijaj do kolejnych linii
wrap-reverse – zawijaj w odwrotnym kierunku

🧵 flex-flow – skrócona notacja

Można skrócić flex-direction i flex-wrap do jednej właściwości:

.kontener {
  flex-flow: row wrap; /* kierunek poziomy + zawijanie */
}

.kontener {

flex-flow: row wrap; /* kierunek poziomy + zawijanie */

}

✅ Podsumowanie

Właściwość	Opis
`display`	Ustawia element jako kontener flex (`flex` lub `inline-flex`)
`flex-direction`	Określa kierunek osi głównej
`flex-wrap`	Określa, czy elementy mogą się zawijać
`flex-flow`	Skrócona notacja dla `direction` + `wrap`

🧪 Ćwiczenie praktyczne

Stwórz układ 6 prostokątów (np. div o klasie box) wewnątrz kontenera:

Ustaw flex-direction: row
Potem zmień na column
Następnie dodaj flex-wrap: wrap
Obserwuj efekty – co się zmienia?

💡 Możesz użyć CodePen albo JSFiddle do eksperymentów!