CSS Flexbox: kompletny przewodnik po elastycznych układach

Flexbox to moduł układu CSS, który pozwala budować elastyczne i adaptacyjne układy elementów HTML. Sprawdza się zwłaszcza wtedy, gdy układ musi dopasować się do różnych rozmiarów ekranu i urządzeń.

Dzięki Flexboksowi wyrównasz elementy w poziomie i w pionie, rozłożysz odstępy między nimi i ustalisz kolejność ich wyświetlania. Daje też elastyczną kontrolę nad rozmiarem elementów, a to podstawa układu responsywnego.

Aby użyć Flexboksa w projekcie, najpierw zadeklaruj kontener flex właściwością CSS display: flex lub display: inline-flex na elemencie HTML. Od tego momentu układem jego dzieci sterują właściwości Flexboksa.

.container-flex {
    display: flex;
}

Jak wyrównywać elementy w Flexboksie

Jedną z najbardziej przydatnych cech Flexboksa jest elastyczne wyrównywanie elementów. Kilka właściwości daje pełną kontrolę nad ułożeniem elementów wewnątrz kontenera flex.

Wyrównanie poziome elementów za pomocą justify-content

Właściwość justify-content steruje poziomym wyrównaniem elementów. 

justify-content: flex-start;

justify-content: center;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

/*wyrównuje elementy do lewej krawędzi*/
.container {
    justify-content: flex-start;
}
/*wyśrodkowuje elementy*/
.container {
    justify-content: center;
}
/*wyrównuje elementy do prawej krawędzi*/
.container {
    justify-content: flex-end;
}
/*rozkłada elementy równomiernie od lewej do prawej krawędzi, bez odstępu przy krawędziach*/
.container {
    justify-content: space-between;
}
/*rozkłada elementy równomiernie od lewej do prawej krawędzi, z równym odstępem przy obu krawędziach*/
.container {
    justify-content: space-around;
}
/* rozkłada elementy równomiernie od lewej do prawej krawędzi, z równym odstępem przy obu krawędziach i między elementami */
.container {
    justify-content: space-evenly;
}

Wyrównanie pionowe elementów za pomocą align-items

Właściwość align-items steruje pionowym wyrównaniem elementów.

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: stretch;

/* Wyrównuje wszystkie elementy do góry */
.container {
    align-items: flex-start;
}

/* Wyrównuje wszystkie elementy do środka */
.container {
    align-items: center;
}

/* Wyrównuje wszystkie elementy do dołu */
.container {
    align-items: flex-end;
}

/*dopasowuje elementy do wysokości ich zawartości*/
.container {
    align-items: stretch;
}

Jak zarządzać przestrzenią między elementami w Flexboksie

Flexbox pozwala też elastycznie rozkładać przestrzeń między elementami. Za odstępy wewnątrz kontenera flex odpowiada kilka właściwości.

Odstępy między elementami za pomocą margin

Właściwość margin ustawia odstęp między elementem a jego sąsiadami. Nadaje się do wyznaczania odstępów osobno dla każdego elementu.

/* Dodanie 20px odstępu między każdym elementem */
.item {
    margin: 0 20px;
}

Odstępy wewnątrz elementu za pomocą padding

Właściwość padding ustawia odstęp między krawędziami elementu a jego zawartością. Ją również stosuje się osobno dla każdego elementu.

/* Dodanie 20px odstępu wokół elementu */
.item {
    padding: 20px;
}

Jednakowe odstępy za pomocą gap

Od czasów CSS Grid Layout Flexbox może używać gap do wstawiania odstępu między elementami. Ta właściwość ustawia jednakową przerwę między wszystkimi elementami kontenera flex.

/* Dodanie 20px odstępu między wszystkimi elementami */
.container {
    gap: 20px;
}

Można ją łączyć z właściwościami row-gap i column-gap, aby ustawić różne odstępy w wierszach i w kolumnach. Pamiętaj, że działa tylko na bezpośrednie dzieci kontenera flex i że przed użyciem warto sprawdzić wsparcie przeglądarek.

Właściwości Flexboksa

Flexbox ma sporo właściwości służących do budowania elastycznych i adaptacyjnych układów elementów HTML. W tej części omawiamy te używane najczęściej.

flex-direction

Właściwość flex-direction określa kierunek, w jakim elementy układają się w kontenerze flex. Możliwe wartości są cztery: row, row-reverse, column i column-reverse. Domyślna to row.

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

/* Układ elementów w wierszu (domyślnie) */
.container {
    flex-direction: row;
}

/* Układ elementów w odwróconym wierszu */
.container {
    flex-direction: row-reverse;
}

/* Układ elementów w kolumnie */
.container {
    flex-direction: column;
}

/* Układ elementów w odwróconej kolumnie */
.container {
    flex-direction: column-reverse;
}

flex-wrap

Właściwość flex-wrap określa, czy elementy kontenera flex mają być ułożone w jednym wierszu, czy w kilku. Możliwe są trzy wartości: nowrap (domyślna), wrap oraz wrap-reverse, która układa wiersze w odwrotnej kolejności.

flex-wrap: nowrap;

flex-wrap: wrap;

/* Układ elementów w jednym wierszu (domyślnie) */
.container {
    flex-wrap: nowrap;
}

/* Układ elementów w kilku wierszach */
.container {
    flex-wrap: wrap;
}

flex-flow

Właściwość flex-flow to skrót zapisu właściwości flex-direction i flex-wrap:

/* Układ elementów w wierszu i w kilku wierszach */
.container {
    flex-flow: row wrap;
}

justify-content

Właściwość justify-content określa, jak elementy są wyrównane na osi poziomej (x) w kontenerze flex. Do wyboru jest kilka wartości: flex-start, center, flex-end, space-between, space-around i space-evenly. Domyślna to flex-start.

/*wyrównuje elementy do lewej krawędzi*/
.container {
    justify-content: flex-start;
}
/*wyśrodkowuje elementy*/
.container {
    justify-content: center;
}
/*wyrównuje elementy do prawej krawędzi*/
.container {
    justify-content: flex-end;
}
/*rozkłada elementy równomiernie między
lewą a prawą krawędzią, bez odstępu przy krawędziach*/
.container {
    justify-content: space-between;
}
/*rozkłada elementy równomiernie od lewej krawędzi
do prawej, z równym odstępem przy obu krawędziach*/
.container {
    justify-content: space-around;
}
/* rozkłada elementy równomiernie od lewej krawędzi
do prawej, z równym odstępem przy obu krawędziach i
między każdym elementem */
.container {
    justify-content: space-evenly;
}

align-items

Właściwość align-items określa, jak elementy są wyrównane na osi pionowej (y) w kontenerze flex. Do wyboru jest kilka wartości: flex-start, center, flex-end, baseline i stretch. Domyślna to stretch.

/* Wyrównuje wszystkie elementy do góry */
.container {
    align-items: flex-start;
}

/* Wyrównuje wszystkie elementy do środka */
.container {
    align-items: center;
}

/* Wyrównuje wszystkie elementy do dołu */
.container {
    align-items: flex-end;
}

/*dopasowuje elementy do wysokości ich zawartości*/
.container {
    align-items: stretch;
}

align-content

Właściwość align-content jest podobna do align-items, ale działa na wiersze wielowierszowego kontenera flex. Przyjmuje te same wartości co align-items, a ponadto space-between, space-around i space-evenly do rozmieszczania wierszy.

align-content: flex-start;

align-content: center;

align-content: flex-end;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

/*wyrównuje elementy do lewej krawędzi*/
.container {
    justify-content: flex-start;
}
/*wyśrodkowuje elementy*/
.container {
    justify-content: center;
}
/*wyrównuje elementy do prawej krawędzi*/
.container {
    justify-content: flex-end;
}
/*rozkłada elementy równomiernie między
lewą a prawą krawędzią, bez odstępu przy
krawędziach*/
.container {
    justify-content: space-between;
}
/*rozkłada elementy równomiernie od krawędzi
lewej do prawej, z równym odstępem przy
obu krawędziach*/
.container {
    justify-content: space-around;
}
/* rozkłada elementy równomiernie od krawędzi
lewej do prawej, z równym odstępem przy
obu krawędziach i między elementami */
.container {
    justify-content: space-evenly;
}

order

Właściwość order ustala kolejność wyświetlania elementów kontenera flex. Przyjmuje liczbę całkowitą, domyślnie 0.

<div class="container">
    <div class="item first">1</div>
    <div class="item second">2</div>
    <div class="item third">3</div>
    <div class="item fourth">4</div>
    <div class="item fifth">5</div>
</div>

.container {
    display: flex;
}
/*ustawia element 1 jako pierwszy*/
.first {
    order: -1;
}
/*ustawia element 3 jako drugi*/
.third {
    order: 2;
}
/*ustawia element 5 jako ostatni*/
.fifth {
    order: 3;
}

Przy takim kodzie elementy wyświetlą się w kolejności: 1, 3, 2, 4, 5

Elementy z ustawioną wartością są sortowane właśnie według niej, a te bez wartości dostają domyślne 0. Elementy z wartościami ujemnymi trafiają przed te z wartościami dodatnimi.

Wartościami można żonglować, aż układ wygląda tak, jak chcesz. Zauważ, że kolejność reguł CSS w pliku nie wpływa na kolejność wyświetlania elementów, steruje nią wyłącznie order.

flex-grow, flex-shrink i flex-basis

Właściwości flex-grow, flex-shrink i flex-basis określają rozmiar elementów w kontenerze flex.

• flex-grow określa, jaką część dostępnej przestrzeni ma zająć dany element.
• flex-shrink określa, o ile element ma się skurczyć, żeby zmieścić się w węższym kontenerze.
• flex-basis określa bazowy rozmiar elementu, zanim zadziałają flex-grow i flex-shrink.

flex-grow: 1;

flex-shrink: 1;

flex-basis: 200px;

/* pozwala elementowi zająć
całą dostępną przestrzeń */
.item {
    flex-grow: 1;
}

/* pozwala elementowi się skurczyć
aby zmieścił się w mniejszym kontenerze */
.item {
    flex-shrink: 1;
}

/* ustawia bazowy rozmiar elementu na 200px */
.item {
    flex-basis: 200px;
}

Te trzy właściwości można zapisać razem skrótem flex

/* flex: flex-grow | flex-shrink | flex-basi */
.item {
    flex: 1 1 200px;
}

Przykłady

Przykład 1: siatka na Flexboksie

<div class="container-flex">
  <div class="item-flex item1">1</div>
  <div class="item-flex item2">2</div>
  <div class="item-flex item3">3</div>
  <div class="item-flex item4">4</div>
  <div class="item-flex item5">5</div>
  <div class="item-flex item6">6</div>
  <div class="item-flex item7">7</div>
  <div class="item-flex item8">8</div>
  <div class="item-flex item9">9</div>
</div>

.container-flex {
  display: flex;
  flex-wrap: wrap;
  /* pozwala rozłożyć element na
  kilka wierszy, jeśli brakuje miejsca */
  justify-content: space-between;
  /* rozkłada elementy równomiernie
  od lewej do prawej krawędzi, bez odstępu
  przy krawędziach */
  align-content: space-between;
  /* rozkłada wiersze równomiernie między
  górą a dołem, bez odstępu przy krawędziach */
}
.item-flex {
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  /* używa flex-grow i flex-basis do rozłożenia
  elementów w siatce 3 kolumn, wykorzystując
  33.33% dostępnej szerokości i
  zmniejszając odstęp między elementami o 20px */
}

Właściwość flex pozwala określić, jak elementy dopasowują się do wolnej przestrzeni w kontenerze flex. W tym przykładzie używamy flex: 1 0 calc(33.33% - 20px); aby rozłożyć elementy w siatce trzykolumnowej: każdy zajmuje 33.33% dostępnej szerokości pomniejszone o 20px odstępu. Powstaje siatka, która sama dostosowuje się do rozmiaru okna.

Łącząc właściwości justify-content, align-content i flex, zbudujesz elastyczne układy dopasowane do własnych potrzeb. Te właściwości da się zestawiać na wiele sposobów i za każdym razem uzyskać inny efekt. Eksperymentuj, aż znajdziesz kombinację pasującą do twojego projektu.

Przykład 2: responsywne menu

<nav class="menu-container">
  <a href="#" class="menu-item">Home</a>
  <a href="#" class="menu-item">About</a>
  <a href="#" class="menu-item">Services</a>
  <a href="#" class="menu-item">Contact</a>
</nav>

.menu-container {
  display: flex; /* włącza układ flex */
  justify-content: space-between; /* rozsuwa pozycje menu do lewej i prawej krawędzi */
  align-items: center; /* wyrównuje pozycje menu do środka w pionie */
}

/* Dodaje przycisk menu dla małych ekranów */
.menu-container::before {
  content: "Menu"; /* Tekst wyświetlany na przycisku */
  display: none; /* domyślnie ukrywa przycisk */
}

/* Gdy szerokość ekranu jest mniejsza niż 600px */
@media (max-width: 600px) {
  .menu-container {
    flex-wrap: wrap; /* Pozwala elementom przechodzić do kolejnych wierszy */
    justify-content: center; /* Wyśrodkowuje elementy w poziomie */
  }
  .menu-item {
    flex-basis: 100%; /* Zajmuje całą dostępną szerokość */
    text-align: center; /* Wyśrodkowuje tekst */
  }
  .menu-container::before {
    display: block; /* Pokazuje przycisk menu */
  }
}

W tym przykładzie menu układa się poziomo i rozsuwa do lewej i prawej krawędzi na szerszych ekranach (tak działa domyślnie). Na małych ekranach (poniżej 600px szerokości) pozycje są wyśrodkowane i przechodzą do kolejnych wierszy, a do otwierania i zamykania menu dochodzi przycisk „Menu” obsługiwany JavaScriptem albo innym narzędziem. Jeśli potrzebujesz bardziej rozbudowanego przykładu, opisałem responsywne menu na Flexboksie w osobnym artykule.

Podsumowanie

Flexbox pozwala szybko zbudować elastyczne i adaptacyjne układy elementów HTML. Właściwości takie jak display, justify-content, align-items i flex wystarczą, żeby sprawnie wyrównać i uporządkować elementy w kontenerze flex.

Flexbox szczególnie dobrze sprawdza się przy siatkach treści, menu i responsywnych formularzach, bo skutecznie rozdziela dostępną przestrzeń zgodnie z potrzebami układu. Nie jest jednak lekarstwem na wszystkie problemy z layoutem, rozwiązuje tylko część z nich, za to tych najczęstszych. Często używa się go razem z innymi technikami układu, jak Grid Layout, albo z frameworkami pokroju Bootstrapa.

Flexbox to mocne narzędzie dla webdeveloperów: pozwala budować elastyczne układy stron i aplikacji. Żeby wycisnąć z niego maksimum, trzeba rozumieć jego podstawowe właściwości i zastosowania. I nie zapomnij sprawdzić wsparcia przeglądarek, zanim wdrożysz go w projekcie.

Tę zgodność można zresztą zautomatyzować na etapie kompilacji: PostCSS dokłada prefiksy producentów na podstawie listy przeglądarek, które obsługujesz. Konfigurację opisuje przewodnik po Webpacku 5, razem z pułapką zapytania last 2 versions, które wciąga Internet Explorera i rozdmuchuje CSS martwymi prefiksami.