CSS Flexible Box Layout (Flexbox)

CSS Flexible Box Layout, popularnie określany jako Flexbox, jest modułem CSS służącym do tworzenia dynamicznych i elastycznych układów elementów w obrębie jednego kontenera. Pozwala on na łatwe rozmieszczanie, wyrównywanie i rozciąganie elementów w osi głównej (main axis) oraz w osi poprzecznej (cross axis) bez konieczności stosowania skomplikowanych pływów czy pozycji.

Historia

Idea elastycznych układów pojawiła się po raz pierwszy w specyfikacji CSS3 w latach 2009 jako część prac W3C nad ulepszeniem tradycyjnego modelu pudełkowego (model pudełkowy). Pierwsza wersja modułu Flexible Box Layout Module Level 1 została opublikowana jako Recommendation w 2012 roku, a od tego czasu jest stopniowo wspierana przez wszystkie nowoczesne przeglądarki.

Podstawowe pojęcia

Kontener flex (flex container) – element, któremu nadano właściwość display:flex lub display:inline-flex. To on definiuje kontekst flex‑owy.
Element flex (flex item) – bezpośrednie dziecko kontenera flex, które podlega regułom układu elastycznego.
Oś główna (main axis) – domyślnie pozioma oś, wzdłuż której rozmieszczane są elementy. Jej kierunek można zmienić własnością flex-direction.
Oś poprzeczna (cross axis) – prostopadła do osi głównej oś, wzdłuż której odbywa się wyrównywanie elementów.

Właściwości kontenera flex

Właściwość	Opis	Domyślna wartość
`display`	Uaktywnia tryb flex (`flex` lub `inline-flex`)	`block`
`flex-direction`	Określa kierunek osi głównej	`row`
`flex-wrap`	Definiuje, czy elementy mogą łamać wiersze	`nowrap`
`justify-content`	Ustawia rozmieszczenie elementów wzdłuż osi głównej	`flex-start`
`align-items`	Wyrównuje elementy wzdłuż osi poprzecznej	`stretch`
`align-content`	Reguluje rozmieszczenie wielu wierszy (gdy `flex-wrap` jest włączone)	`stretch`

Właściwości elementu flex

Właściwość	Opis	Domyślna wartość
`order`	Określa kolejność wyświetlania elementu względem rodzeństwa	`0`
`flex-grow`	Definiuje ile wolnego miejsca element ma przyjąć	`0`
`flex-shrink`	Określa, jak element ma się kurczyć przy braku miejsca	`1`
`flex-basis`	Ustawia początkowy rozmiar przed zastosowaniem `flex-grow` i `flex-shrink`	`auto`
`align-self`	Indywidualne wyrównanie elementu w osi poprzecznej (nadpisuje `align-items`)	`auto`

Przykładowy kod

<style>
  .menu {
    display: flex;                /* włącza tryb flex */
    flex-direction: row;          /* elementy w jednym wierszu */
    justify-content: space-between; /* równomierne rozmieszczenie */
    align-items: center;         /* pionowe wyśrodkowanie */
    background: #2c3e50;
    padding: 0.5rem;
  }
  .menu > a {
    color: #ecf0f1;
    text-decoration: none;
    padding: 0.5rem 1rem;
  }
</style>

<nav class="menu">
  <a href="/home">Strona główna</a>
  <a href="/about">O nas</a>
  <a href="/services">Usługi</a>
  <a href="/contact">Kontakt</a>
</nav>

Wsparcie przeglądarek

Moduł Flexbox jest obsługiwany przez wszystkie współczesne przeglądarki: Chrome, Firefox, Safari, Edge oraz mobilne silniki WebKit i Blink. W starszych wersjach (np. Internet Explorer 10) dostępne są prefiksy (-ms-).

Porównanie z innymi metodami układu

CSS Grid Layout – dwuwymiarowy system siatki, idealny do bardziej złożonych projektów, podczas gdy Flexbox działa najlepiej w jednowymiarowych kontekstach.
Float – starsza technika, wymagająca dodatkowych hacków, nie oferująca tak elastycznego wyrównywania.
position – pozwala na dokładne pozycjonowanie, ale nie zapewnia automatycznego rozmieszczania elementów w zależności od dostępnej przestrzeni.

Zobacz także

CSS, HTML, W3C, model pudełkowy, CSS Grid Layout, responsywny design.