Flexbox

Flexbox (ang. Flexible Box Layout) – nowoczesny model układu elementów w CSS, który pozwala na prostą i elastyczną organizację elementów wzdłuż jednego wymiaru (osi głównej) oraz drugiego wymiaru (osi poprzecznej). Flexbox został po raz pierwszy opublikowany w 2009 roku jako część specyfikacji CSS Flexible Box Layout (znanej również jako display: flex).

Historia

Idea elastycznych kontenerów sięga wczesnych lat 2005, jednak dopiero w 2009 roku W3C opublikowało pierwszą wersję specyfikacji. W kolejnych latach model został zaimplementowany w najważniejszych przeglądarkach: Google Chrome (od wersji 21), Mozilla Firefox (od wersji 18), Safari (od wersji 6.1) oraz Microsoft Edge (od wersji 12). Od 2017 roku Flexbox jest w pełni wspierany w praktycznie wszystkich współczesnych przeglądarkach.

Podstawowe pojęcia

Kontener flex (flex container) – element, któremu nadano właściwość display: flex lub display: inline-flex. To on definiuje osię główną i osię poprzeczną.
Element flex (flex item) – bezpośrednie dziecko kontenera flex, które podlega układowi elastycznemu.
Oś główna (main axis) – domyślnie pozioma linia, wzdłuż której rozmieszczane są elementy; jej kierunek określa flex-direction.
Oś poprzeczna (cross axis) – prostopadła do osi głównej; służy do wyrównywania elementów w pionie (lub w poziomie, gdy zmieniona jest orientacja).

Właściwości kontenera

Właściwość	Opis	Wartości
`display`	Uaktywnia tryb flexbox.	`flex`, `inline-flex`
`flex-direction`	Ustawia kierunek osi głównej.	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Określa zachowanie elementów, gdy nie mieszczą się w jednej linii.	`nowrap`, `wrap`, `wrap-reverse`
`justify-content`	Wyrównuje elementy wzdłuż osi głównej.	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`
`align-items`	Wyrównuje elementy wzdłuż osi poprzecznej (dla jednowierszowych układów).	`stretch`, `flex-start`, `flex-end`, `center`, `baseline`
`align-content`	Wyrównuje wielowierszowe linie wzdłuż osi poprzecznej.	`stretch`, `flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`gap`	Ustawia odstępy między elementami (od wersji 2020 dostępny w Flexbox).	wartość długości, np. `1rem`

Właściwości elementu

Właściwość	Opis	Wartości
`order`	Określa kolejność wyświetlania elementu w obrębie kontenera.	liczba całkowita, domyślnie `0`
`flex-grow`	Definiuje, jak bardzo element może rosnąć wzdłuż osi głównej, aby wypełnić dostępne miejsce.	liczba nieujemna, domyślnie `0`
`flex-shrink`	Określa, jak bardzo element może się kurczyć, gdy brakuje miejsca.	liczba nieujemna, domyślnie `1`
`flex-basis`	Ustawia początkowy rozmiar elementu przed przydzieleniem dodatkowego miejsca.	wartość długości, `auto`
`flex`	Skrócona notacja łącząca `flex-grow`, `flex-shrink` i `flex-basis`.	np. `1 0 auto`
`align-self`	Umożliwia indywidualne wyrównanie elementu wzdłuż osi poprzecznej, nadpisując `align-items`.	wartości takie same jak w `align-items`

Przykładowy kod

<style>
.container {
    display: flex;               /* aktywuje Flexbox */
    flex-direction: row;         /* układ wierszowy */
    flex-wrap: wrap;             /* wiersze mogą się zawijać */
    justify-content: space-between; /* rozkład między elementami */
    align-items: center;         /* pionowe wyśrodkowanie */
    gap: 1rem;                   /* odstęp między elementami */
}
.item {
    flex: 1 1 200px;              /* rośnie, kurczy się, bazowy rozmiar 200 px */
    order: 0;                    /* kolejność w normalnym porządku */
    background: #f0f0f0;
    padding: 1rem;
}
</style>

<div class="container">
    <div class="item">Pierwszy element</div>
    <div class="item">Drugi element</div>
    <div class="item">Trzeci element</div>
</div>

Powyższy przykład tworzy elastyczny wiersz trzech elementów, które dopasowują się do dostępnej szerokości, automatycznie przełamując się do nowego wiersza, jeśli braknie miejsca.

Zalety stosowania Flexbox

Łatwe centrowanie elementów zarówno w pionie, jak i w poziomie.
Dynamiczne dzielenie dostępnej przestrzeni pomiędzy elementy.
Proste zarządzanie kolejnością wyświetlania bez zmiany struktury DOM.
Responsywne zachowanie przy zmianie rozmiaru ekranu.
Wbudowane wsparcie dla odstępów (gap), co eliminuje konieczność stosowania marginesów.

Porównanie z innymi technikami układu

Przed wprowadzeniem Flexbox najczęściej używano float oraz position do budowania skomplikowanych układów, co wiązało się z licznymi „hackami”. Flexbox znacząco upraszcza te zadania, ale nie zastępuje całkowicie CSS Grid Layout, który lepiej sprawdza się przy dwuwymiarowych układach (zarówno wiersze, jak i kolumny).

Wsparcie przeglądarek

Obecnie Flexbox jest wspierany przez wszystkie popularne przeglądarki, w tym:

Google Chrome (od wersji 21)
Mozilla Firefox (od wersji 18)
Safari (od wersji 6.1)
Microsoft Edge (od wersji 12)
Opera (od wersji 12)

W starszych wersjach przeglądarek istnieją prefiksy (-webkit-, -ms-), które obecnie są już przestarzałe.