Flexbox

Flexbox, czyli Flexible Box Layout, to moduł CSS, który umożliwia elastyczne rozmieszczanie oraz wyrównywanie elementów w kontenerze. Jest to jednowymiarowy model układu, pozwalający zarządzanie pozycjonowaniem elementów w rzędach lub kolumnach oraz na ich automatyczne dostosowywanie do dostępnej przestrzeni. Flexbox pozwala tworzyć responsywne i elastyczne układy bez konieczności stosowania starszych metod, takich jak float czy position, co znacznie upraszcza projektowanie stron działających na różnych urządzeniach.

Główne cechy Flexbox to:

Definiowanie kontenera z display: flex, który otacza elementy potomne.
Możliwość ustawiania kierunku ułożenia elementów (wiersz, kolumna itp.).
Elastyczne wyrównywanie elementów zarówno w pionie, jak i poziomie.
Automatyczne dostosowywanie rozmiarów elementów do dostępnej przestrzeni.
Łatwe zarządzanie odstępami i kolejnością elementów.

Flexbox ułatwia budowanie nowoczesnych i responsywnych layoutów, poprawiając wygodę projektowania i użytkowania stron internetowych.

Osie Flexbox

W Flexboxie wyróżniamy dwie osie, które są kluczowe dla układu elementów:

Oś główna (main axis) – to oś, wzdłuż której ułożone są elementy flexboxa. Domyślnie jest to oś pozioma (od lewej do prawej), ale można ją zmienić za pomocą właściwości flex-direction (na przykład na kolumnę, czyli oś pionową). To wzdłuż osi głównej flexbox decyduje, jak elementy są układane jeden obok drugiego.
Oś poprzeczna (cross axis) – jest prostopadła do osi głównej. Jeśli oś główna jest pozioma, to oś poprzeczna jest pionowa. To wzdłuż osi poprzecznej można ustawiać wyrównanie elementów, np. wyśrodkowanie lub rozciąganie wysokości elementów.

Te dwie osie pozwalają na elastyczne i precyzyjne zarządzanie rozmieszczeniem elementów w kontenerze flexbox, tworząc elastyczne i responsywne układy stron internetowych.

Kontener Flexbox

Kontener flexbox to element nadrzędny, któremu za pomocą właściwości display: flex lub display: inline-flex nadaje się elastyczny sposób układania jego bezpośrednich elementów potomnych. Po ustawieniu tego stylu, wszystkie dzieci takiego kontenera stają się elementami flex (flex items) i są rozmieszczane zgodnie z zasadami Flexboxa.

Kontener flex umożliwia układanie elementów w jednej osi (poziomej lub pionowej), a także łatwe wyrównywanie, rozmieszczanie i zarządzanie elastycznym rozmiarem elementów potomnych.

Kontener flex to element, który dzięki display: flex zmienia sposób rozmieszczania swoich dzieci na elastyczny i ustawialny w dwóch osiach: głównej i poprzecznej.

Flex-direction

Właściwość CSS flex-direction określa kierunek układania się elementów potomnych (flex items) wewnątrz kontenera flexbox (flex container). Definiuje oś główną (main axis) i jej orientację oraz kierunek, w którym elementy są rozmieszczane.

Możliwe wartości właściwości flex-direction to:

row (domyślnie) – ustawia oś główną poziomo od lewej do prawej, elementy układane są w rzędzie,
row-reverse – układa elementy poziomo, ale w odwrotnym kierunku, czyli od prawej do lewej,
column – ustawia oś główną pionowo od góry do dołu, elementy są ułożone w kolumnie,
column-reverse – układa elementy pionowo, ale od dołu do góry.

Właściwość ta pozwala łatwo zmieniać orientację i kierunek elementów bez konieczności zmiany HTML

Flex-wrap

Właściwość flex-wrap określa, czy elementy potomne kontenera flexbox mają się zawijać na kolejne linie, jeśli nie mieszczą się w jednej linii wzdłuż osi głównej.

Możliwe wartości to:

nowrap (domyślnie) – elementy są ułożone w jednej linii, nie zawijają się,
wrap – elementy, które nie mieszczą się w szerokości (lub wysokości, zależnie od kierunku flexboxa), zostaną przeniesione do nowego wiersza lub kolumny,
wrap-reverse – działa jak wrap, ale nowa linia jest dodawana w odwrotnym kierunku względem osi poprzecznej.

Flex-wrap pozwala uniknąć ciasnego upakowania elementów w jednej linii i zapewniając lepszą czytelność oraz estetykę układu.

Flex-flow

Właściwość flex-flow to skrócona (shorthand) właściwość, która pozwala jednocześnie ustawić dwie inne właściwości Flexboxa: flex-direction oraz flex-wrap.

flex-direction określa kierunek ułożenia elementów w kontenerze (wiersz/kolumna i ich kierunki),
flex-wrap określa, czy elementy mają się zawijać na kolejne linie, jeśli nie mieszczą się w jednej linii.

Przykład zapisu:

flex-flow: row nowrap;

oznacza, że elementy będą ułożone w jednym poziomym rzędzie i nie będą się zawijać.

Flex-flow pozwala zdefiniować oba te aspekty układu elastycznego jednocześnie w jednej linii, co jest wygodne i czytelne przy tworzeniu responsywnych i elastycznych projektów stron internetowych

Flex-basis

Flex-basis to właściwość CSS używana w kontekście Flexbox, która określa początkowy rozmiar elementu flex wzdłuż osi głównej (main axis) kontenera flexbox. Można ją traktować jako domyślną szerokość (lub wysokość, gdy oś główna jest pionowa) elementu przed zastosowaniem dystrybucji dostępnej przestrzeni przez inne właściwości flex, takie jak flex-grow czy flex-shrink.

Flex-basis może przyjmować wartości takie jak:

konkretne jednostki długości (np. px, em, %, vw),
auto (domyślna wartość), która oznacza, że rozmiar bazowy jest określany przez zawartość elementu lub inne style,
wartości specjalne jak content, max-content, min-content, fit-content.

W praktyce flex-basis decyduje, jak duże jest „podstawowe” miejsce zajmowane przez element flex, zanim nastąpi ewentualne rozszerzanie lub kurczenie się elementu w elastycznym układzie.

Flex-grow

Właściwość CSS flex-grow określa, jak bardzo dany element flex powinien się rozszerzać w stosunku do pozostałych elementów w kontenerze flex, gdy w kontenerze jest dostępna dodatkowa przestrzeń.

Jest to współczynnik wzrostu, który mówi, jaka część wolnej przestrzeni kontenera powinna przypaść konkretnemu elementowi. Wartość flex-grow to liczba dodatnia (może być ułamkowa), gdzie większa liczba oznacza, że element zajmie proporcjonalnie więcej przestrzeni.

Domyślna wartość to 0, co oznacza, że element nie będzie się powiększał ponad swój początkowy rozmiar. Gdy kilka elementów ma ustawioną wartość flex-grow większą niż 0, wolna przestrzeń jest rozdzielana proporcjonalnie do tych wartości.

Przykład: jeśli dwa elementy mają flex-grow odpowiednio 1 i 2, to drugi element zajmie dwa razy więcej dodatkowej przestrzeni niż pierwszy.

Flex-shrink

Właściwość CSS flex-shrink określa, jak bardzo element flex może się zmniejszyć, gdy w kontenerze flexbox brakuje dostępnej przestrzeni. Jest to współczynnik kurczenia się elementu w stosunku do innych elementów w kontenerze.

Domyślnie flex-shrink ma wartość 1, co oznacza, że elementy mogą kurczyć się równomiernie, aby zmieścić się w kontenerze. Jeśli ustawimy wartość 0, element nie będzie się kurczył, nawet jeśli zabraknie miejsca. Wartości większe niż 1 oznaczają, że dany element będzie się kurczył proporcjonalnie bardziej niż inne.

Flex-shrink pomaga zapobiegać przepełnieniu kontenera przez zbyt duże elementy, umożliwiając elastyczne dostosowanie rozmiarów elementów do dostępnej przestrzeni.

Flex (shordhand)

Właściwość flex to skrócony zapis, który pozwala jednocześnie ustawić trzy właściwości Flexboxa elementu potomnego: flex-grow, flex-shrink oraz flex-basis.

Składnia wygląda następująco:

flex: <flex-grow> <flex-shrink> <flex-basis>;

flex-grow określa, jak bardzo element może się rozrastać,
flex-shrink określa, jak bardzo element może się kurczyć,
flex-basis definiuje początkowy rozmiar elementu przed rozrostem lub kurczeniem.

Dzięki tej skróconej właściwości można za jednym zamachem kontrolować elastyczność elementu w kontenerze flex, co upraszcza i skraca kod CSS. Istnieją też predefiniowane skróty takie jak:

flex: initial (odpowiada 0 1 auto),
flex: auto (odpowiada 1 1 auto),
flex: none (odpowiada 0 0 auto),
flex: 1 (odpowiada 1 1 0%).

Align-items

Właściwość CSS align-items określa wyrównanie wszystkich elementów potomnych (flex items) w kontenerze flexbox wzdłuż osi poprzecznej (cross axis), czyli zwykle pionowo.

Pozwala na ustawienie sposobu rozmieszczenia elementów w linii flexboxa, na przykład czy mają być wyrównane do góry, środka, do dołu lub rozciągnięte na całą wysokość kontenera.

Typowe wartości align-items to:

stretch (domyślna) – elementy rozciągają się, aby wypełnić dostępną przestrzeń,
flex-start – elementy wyrównane są do początku osi poprzecznej,
flex-end – elementy wyrównane są do końca osi poprzecznej,
center – elementy wyśrodkowane są w osi poprzecznej,
baseline – elementy wyrównane są względem linii bazowej tekstu.

Justify-content

Właściwość justify-content służy do wyrównywania elementów potomnych w kontenerze flexbox wzdłuż osi głównej (main axis). Określa, jak przeglądarka powinna rozdzielić przestrzeń między elementami i wokół nich, gdy nie zajmują całej dostępnej szerokości kontenera.

Typowe wartości justify-content to:

flex-start (domyślna) – elementy ustawione są na początku osi głównej,
flex-end – elementy ustawione są na końcu osi głównej,
center – elementy są wyśrodkowane w osi głównej,
space-between – wolna przestrzeń jest rozmieszczona równomiernie między elementami,
space-around – wolna przestrzeń jest rozmieszczona równomiernie wokół elementów, z półprzestrzenią na krawędziach,
space-evenly – tworzy równe odstępy między wszystkimi elementami i krawędziami kontenera.

Justify-items

Właściwość CSS justify-items określa domyślne wyrównanie elementów potomnych względem osi poprzecznej (cross axis) w kontenerze, jednak w kontekście Flexboxa właściwość justify-items jest mało używana i nie ma wpływu na układ elementów flex.

justify-items jest bardziej przydatna w kontekstach siatkowych CSS Grid Layout, gdzie kontroluje wyrównanie elementów siatki wewnątrz ich komórek.

Align-self

Właściwość align-self pozwala indywidualnie określić wyrównanie pojedynczego elementu flex wzdłuż osi poprzecznej (cross axis) kontenera flexbox, niezależnie od globalnego wyrównania ustawionego przez właściwość align-items.

Wartości align-self mogą być takie same jak dla align-items, m.in.:

auto (domyślna) – element dziedziczy wyrównanie z kontenera flex (align-items),
stretch – element rozciąga się na pełną wysokość kontenera,
center – element jest wyśrodkowany względem osi poprzecznej,
flex-start – element jest wyrównany do początku osi poprzecznej,
flex-end – element jest wyrównany do końca osi poprzecznej,
baseline – wyrównanie względem linii bazowej tekstu.

align-self ma pierwszeństwo nad align-items, co pozwala na elastyczne dopasowanie wyrównania poszczególnych elementów flex bez zmiany ustawień całego kontenera.

Align-content

Właściwość align-content kontroluje sposób rozmieszczenia całej zawartości (np. linii elementów flex) w kontenerze flexbox wzdłuż osi poprzecznej (cross axis), kiedy elementy te zajmują mniej miejsca niż dostępna przestrzeń w kontenerze.

Jest ona przydatna w przypadku kontenerów wieloliniowych, czyli takich, które mają ustawioną właściwość flex-wrap na wrap lub wrap-reverse. Dzięki align-content można ustawić, jak te linie elementów są rozmieszczone w pionie (lub poziomie, gdy oś główna jest pionowa).

Typowe wartości align-content to:

stretch (domyślna) – linie rozciągają się na całą dostępną przestrzeń,
flex-start – linie ułożone są przy początku osi poprzecznej,
flex-end – linie ułożone są przy końcu osi poprzecznej,
center – linie są wyśrodkowane,
space-between – linie są równomiernie rozmieszczone między początkiem a końcem kontenera,
space-around – linie są rozmieszczone z odstępami wokół nich,
space-evenly – linie są rozłożone z równymi odstępami wokół wszystkich linii.

Align-content różni się od align-items tym, że align-items wyrównuje same elementy w linii, natomiast align-content kontroluje rozmieszczenie całych linii elementów w wieloliniowym kontenerze flex.

Place-items oraz place-content

Właściwości CSS place-items i place-content to skróty (shorthand) używane w układach siatkowych (Grid) i elastycznych (Flexbox), służące do ustawiania wyrównania elementów w dwóch wymiarach.

place-items może wpływać tylko na wyrównanie w osi poprzecznej (align-items), ponieważ justify-items nie działa dla flexboxa,
place-content służy do jednoczesnego ustawiania align-content i justify-content, czyli wyrównania całej zawartości kontenera w obu osiach.

Gap

Właściwości CSS row-gap i column-gap służą do definiowania odstępów między elementami w układzie, w tym w Flexboxie oraz CSS Grid i innych układach kolumnowych.

row-gap określa odstęp między rzędami elementów, czyli pionowe przerwy,
column-gap definiuje odstęp między kolumnami elementów, czyli przerwy poziome.

W Flexboxie te właściwości pozwalają wygodnie ustawić minimalne odstępy między elastycznymi jednostkami w rzędach i kolumnach, zastępując wcześniejsze stosowanie marginesów. Można nimi kontrolować np. odległość między kartami w galerii zdjęć lub elementami listy.

Obie przyjmują wartości liczbowe z jednostkami długości CSS, np. px, em, rem itp. Lub procentowe. Istnieje też właściwość zbiorcza gap.