Czym jest display: inline-flex

Flexbox na dobre zadomowił się w codziennym kodowaniu układów. Każdy frontendowiec zna i stosuje display: flex. Jednak ta właściwość ma mniej znanego bliźniaka: display: inline-flex. Pisze się o nim rzadko, a używa jeszcze rzadziej. I niesłusznie.

Różnicę można streścić w jednym zdaniu: inline-flex tworzy kontener flex, który sam zachowuje się jak element liniowy. Jego potomkowie to zwykłe elementy flex ze wszystkimi możliwościami Flexboksa. Natomiast element nadrzędny nie zajmuje całej dostępnej szerokości wiersza. Dopasowuje się do rozmiaru zawartości i ustawia w jednej linii z sąsiednimi elementami.

Sytuacja jest dokładnie taka sama jak w przypadku pary display: block i display: inline-block. Element blokowy zajmuje cały wiersz, a liniowy tylko tyle, ile potrzebuje treść. Tak samo jest tutaj: flex tworzy blokowy kontener flex, a inline-flex tworzy kontener liniowy.

W praktyce otwiera to scenariusze, które przy zwykłym flex wymagałyby dodatkowych opakowań, sztuczek z szerokością albo przeżytków w postaci float.

💡 Szybki przegląd:

• display: inline-flex tworzy kontener flex, który zachowuje się jak element liniowy i nie zajmuje całego wiersza. Szerokość takiego kontenera jest określana przez zawartość, a nie przez element nadrzędny.
• Wszystkie właściwości flex działają wewnątrz inline-flex tak samo jak w zwykłym display: flex. Nie ma żadnych różnic w układzie potomków, różnica dotyczy wyłącznie zewnętrznego zachowania kontenera.
• Główny przypadek użycia: plakietki, tagi i przyciski z ikonami, gdzie pojedynczy inline-flex na elemencie zastępuje połączenie rodzica flex i potomka liniowego. Uzyskują Państwo wyśrodkowanie zawartości bez zbędnych opakowań.
• Inne wartości display również mają swoje liniowe odpowiedniki: inline-block, inline-table i inline-grid działają na tej samej zasadzie. Wewnętrzna logika układu zostaje zachowana, zmienia się tylko zewnętrzne zachowanie kontenera.

Rzeczywisty przypadek: plakietki z ikonami

Proszę wyobrazić sobie typowe zadanie. Na stronie potrzebny jest rząd plakietek. Każda ma ikonę i tekst, przy czym ikona jest wyśrodkowana w pionie i poziomie wewnątrz kolorowego kółka. Same plakietki stoją w rzędzie, jak zwykły tekst, i zawijają się do następnego wiersza, gdy nie mieszczą się w szerokości.

Jeśli ustawią Państwo plakietkom display: flex, każda z nich rozciągnie się na całą szerokość elementu nadrzędnego. Plakietki ułożą się w kolumnę, a nie w rząd. Można to skorygować, dodając opakowanie z display: flex na elemencie nadrzędnym. Ale po co dodatkowy wrapper, skoro jest inline-flex?

Struktura HTML jest elementarna:

1
<div class="badges-list">
2
  <span class="c-badge">
3
    <svg class="c-icon" width="24" height="24">...</svg>
4
  </span>
5
  <span class="c-badge">
6
    <svg class="c-icon" width="24" height="24">...</svg>
7
  </span>
8
  <!-- остальные бейджи -->
9
</div>

Proszę zwrócić uwagę: wrapper .badges-list nie robi nic dla pozycjonowania liniowego. Odpowiada za to sam .c-badge.

CSS dla plakietki:

1
.c-badge {
2
  display: inline-flex;
3
  justify-content: center;
4
  align-items: center;
5
}

To wszystko. Każda plakietka jest kontenerem flex o zachowaniu liniowym. Ikona wewnątrz jest centrowana za pomocą justify-content i align-items. Same plakietki układają się w rząd i zawijają do nowego, jeśli zabraknie szerokości. Dokładnie to, czego wymagał projekt, bez zbędnych opakowań.

Inline-flex vs flex: wizualne porównanie

Najlepszym sposobem na zrozumienie różnicy jest spojrzenie na dwa identyczne zestawy kontenerów: jeden z display: flex, drugi z display: inline-flex.

Przykład 1: display: flex

Trzy kontenery nadrzędne z niebieskim tłem. Wewnątrz każdego znajdują się trzy czerwone elementy potomne z flex: 1. Elementom nadrzędnym nadano display: flex.

Rezultat: każdy niebieski kontener zajmuje cały wiersz. Potomkowie wewnątrz rozciągają się na równą szerokość. Kontenery ułożyły się w kolumnę, jeden pod drugim.

1
.container--flex {
2
  display: flex;
3
}
4
 
5
.container--flex > div {
6
  flex: 1;
7
}

Przykład 2: display: inline-flex

Te same trzy kontenery, ale z display: inline-flex. Potomkom dodano min-width: 50px, aby kontener nie zwinął się do zera.

1
.container--inline-flex {
2
  display: inline-flex;
3
}
4
 
5
.container--inline-flex > div {
6
  flex: 1;
7
  min-width: 50px;
8
}

Rezultat: kontenery ustawiły się w jednym rzędzie. Każdy zajmuje dokładnie tyle szerokości, ile potrzebują potomkowie (50px × 3 = 150px). Zachowują się jak słowa w zdaniu, zawijają się do następnego wiersza dopiero, gdy skończy się miejsce.

Kluczowy wniosek: dla elementów flex wewnątrz kontenera nie ma żadnej różnicy. Właściwości takie jak justify-content i align-items, a także gap i flex-direction działają identycznie. Różnica polega wyłącznie na tym, jak sam kontener wchodzi w interakcję ze światem zewnętrznym. Jako blok albo jako element liniowy.

Kiedy warto stosować inline-flex: 4 scenariusze

Nie każdy układ wymaga inline-flex. Są jednak sytuacje, w których rozwiązuje on zadanie elegancko, bez kombinacji flex + opakowanie.

1. Lista tagów lub plakietek. Najczęstsze zastosowanie. Każdy tag jest kontenerem flex, wewnątrz którego ikona i tekst są wyrównane do środka. Same tagi układają się w rząd z zawijaniem. inline-flex na tagu i żadnych wrapperów.

2. Przyciski z ikoną w wierszu tekstu. Gdy przycisk akcji (kopiuj, otwórz, usuń) znajduje się bezpośrednio wewnątrz akapitu lub nagłówka. inline-flex pozwala wyśrodkować ikonę wewnątrz przycisku, nie wyrywając przycisku z przepływu tekstu.

3. Liniowy pasek narzędzi. Zestaw przycisków formatowania w edytorze WYSIWYG. Każdy przycisk jest kontenerem inline-flex z ikoną w środku. Wszystkie przyciski stoją w rzędzie i zawijają się w naturalny sposób.

4. Pionowe centrowanie w kontekście liniowym. Klasyczna bolączka CSS: wyśrodkowanie ikony w pionie względem sąsiedniego tekstu. vertical-align: middle działa raz na jakiś czas. inline-flex z align-items: center działa zawsze.

Przytoczę kod dla scenariuszy 2 i 3, aby nie pozostały one na poziomie teorii.

Przycisk z ikoną w tekście (scenariusz 2). Załóżmy, że wewnątrz akapitu potrzebny jest przycisk „kopiuj". Musi on pozostać w przepływie tekstu i nie złamać wiersza. Oto minimalny CSS:

1
.inline-action-btn {
2
  display: inline-flex;
3
  align-items: center;
4
  justify-content: center;
5
  width: 24px;
6
  height: 24px;
7
  border: none;
8
  background: transparent;
9
  cursor: pointer;
10
  vertical-align: middle;
11
}

Trzy linijki centrowania flex i ikona wewnątrz przycisku jest wyrównana w obu osiach. Żadnych sztuczek z line-height, żadnych position: relative plus transform. Przycisk siedzi bezpośrednio w tekście, jak kolejne słowo.

Pasek narzędzi (scenariusz 3). Typowy edytor WYSIWYG: przyciski „pogrubienie", „kursywa", „link" stoją w rzędzie. Każdy przycisk jest kontenerem inline-flex:

1
.toolbar__btn {
2
  display: inline-flex;
3
  align-items: center;
4
  justify-content: center;
5
  width: 32px;
6
  height: 32px;
7
  border-radius: 4px;
8
}

Przyciski zawijają się przy zwężaniu okna bez dodatkowych wrapperów. Dla panelu nadrzędnego sprawdzi się display: flex z flex-wrap: wrap i gap: 4px. Powstaje dwupoziomowa kompozycja flex: zewnętrzny kontener zarządza rzędem przycisków, a każdy przycisk centruje swoją ikonę.

Ukryte pułapki inline-flex

Trzy nieoczywiste sytuacje, które oszczędzają godziny w DevTools.

Odstępy między elementami. Podobnie jak inline-block, elementy z inline-flex są wrażliwe na białe znaki w HTML. Trzy elementy <span> z inline-flex w osobnych wierszach otrzymają odstęp 4-5 pikseli. Rozwiązanie: font-size: 0 na elemencie nadrzędnym z przywróceniem na potomkach, usunięcie białych znaków między tagami albo połączenie display: flex na elemencie nadrzędnym plus inline-flex na potomkach.

text-align nie działa na potomkach flex. Dla inline-block elementy wyrównuje się przez text-align: center na elemencie nadrzędnym. W przypadku inline-flex ta sztuczka działa tylko dopóty, dopóki potomkowie nie staną się kontenerami flex. Elementy flex nie reagują na text-align. Proszę wyrównywać kontenery przez justify-content na nadrzędnym elemencie flex lub margin: auto.

Domyślny kierunek flex. inline-flex, podobnie jak display: flex, domyślnie układa potomków w rzędzie (flex-direction: row). Jeśli oczekują Państwo kolumny wewnątrz kontenera liniowego, należy jawnie ustawić flex-direction: column. Specyfikacja nie czyta w myślach kodującego.

Krewni: inne liniowe warianty display

inline-flex ma ideowych pobratymców. Prawie każda blokowa wartość display ma swój liniowy odpowiednik:

Mechanika jest wszędzie taka sama: wewnętrzna logika układu zostaje w pełni zachowana, zmienia się tylko zewnętrzne zachowanie kontenera. Z inline-grid historia jest identyczna: to kontener grid, który ustawia się w rzędzie, a nie na całą szerokość elementu nadrzędnego.

W praktyce inline-flex jest używany częściej niż inline-grid. Powód jest prosty: kontenery flex są częściej potrzebne do małych komponentów (plakietka, przycisk, grupa ikon), gdzie zachowanie liniowe jest dokładnie tym, czego trzeba. Układ grid jest częściej stosowany do dużych bloków strukturalnych, którym zachowanie inline jest niepotrzebne.

Wsparcie przeglądarek dla inline-flex jest praktycznie pełne. Właściwość pojawiła się w specyfikacji Flexible Box Layout Module Level 1 (kandydat na rekomendację W3C, 2016 rok) i działa we wszystkich nowoczesnych przeglądarkach: Chrome od wersji 29 (2013), Firefox od 20 (2013), Safari od 9 (2015), Edge od 12 (2015). Internet Explorer 11 obsługuje inline-flex z zastrzeżeniami, ale według danych StatCounter na rok 2025 udział IE11 wynosi mniej niż 0,1% światowego rynku. W projektach, które muszą wspierać IE11, inline-flex należy testować ręcznie: w przypadku części błędów z flex-basis i min-height ta przeglądarka zachowuje się nieprzewidywalnie.

⁉️🤔 Często zadawane pytania

Jaka jest różnica między display: inline-flex a display: flex?

display: flex tworzy blokowy kontener flex, zajmuje on całą dostępną szerokość wiersza. display: inline-flex tworzy liniowy kontener flex, jego szerokość jest określana przez zawartość i może on stać w jednym wierszu z innymi elementami. Dla potomków wewnątrz kontenera nie ma różnicy: wszystkie właściwości flex działają tak samo w obu przypadkach.

Kiedy inline-flex jest lepsze niż inline-block?

inline-block nie daje kontroli nad wyrównaniem potomków. Jeśli trzeba wyśrodkować ikonę wewnątrz przycisku w pionie i poziomie, inline-block zmusi Państwa do przypominania sobie sztuczek z line-height i vertical-align. inline-flex z justify-content: center i align-items: center robi to bez zbędnych ceregieli.

Czy można używać gap z inline-flex?

Tak, gap działa w inline-flex tak samo jak w zwykłym flex. Definiują Państwo odstęp między elementami flex, a przeglądarka stosuje go niezależnie od tego, czy kontener jest blokowy, czy liniowy. Wsparcie dla gap w flexboksie mają wszystkie nowoczesne przeglądarki od 2021 roku.

Czy inline-flex wpływa na zagnieżdżone kontenery flex?

Nie. Właściwość display nie jest dziedziczona. Jeśli wewnątrz kontenera inline-flex znajduje się element z display: flex, będzie on zwykłym blokowym kontenerem flex. Zachowanie liniowe dotyczy tylko tego elementu, któremu jawnie nadano inline-flex.

*inline-flex** a dostępność: czy są jakieś pułapki?*

Czytniki ekranu nie rozróżniają flex i inline-flex. Obie wartości wpływają tylko na układ wizualny i nie zmieniają semantyki ani kolejności odczytu. Właściwość flex order zmienia kolejność wizualną, ale nie kolejność w drzewie dostępności, co jest poprawne dla obu wartości display.

Co wybrać: flex czy inline-flex

Wybór sprowadza się do prostego pytania: czy kontener ma stać w rzędzie z sąsiadami, czy zająć całą szerokość elementu nadrzędnego?

Jeśli kodują Państwo komponent, plakietkę, przycisk z ikoną, tag, element paska narzędzi, proszę użyć inline-flex. Otrzymają Państwo centrowanie zawartości flex i zachowają naturalne zachowanie liniowe bez dodatkowych opakowań.

Jeśli kodują Państwo sekcję, kartę, nagłówek, stopkę lub layout, proszę pozostać przy display: flex. Zachowanie blokowe jest tu odpowiednie: kontener ma zająć swój wiersz, a nie wciskać się między sąsiednie elementy.

Złota zasada: proszę wejść w DevTools, spojrzeć na element. Jeśli jest w rzędzie z innymi, inline-flex. Jeśli jest w swoim własnym wierszu, flex. Prościej się nie da.