Was ist display: inline-flex

Flexbox ist aus dem täglichen Web-Layout nicht mehr wegzudenken. Jeder Frontend-Entwickler kennt und nutzt display: flex. Doch diese Eigenschaft hat einen weniger bekannten Verwandten: display: inline-flex. Darüber wird selten geschrieben, und noch seltener wird er eingesetzt. Das ist ein Fehler.

Der Unterschied lässt sich in einem Satz zusammenfassen: inline-flex erzeugt einen Flex-Container, der sich selbst wie ein Inline-Element verhält. Seine Kinder sind ganz normale Flex-Items mit allen Fähigkeiten von Flexbox. Das Elternelement hingegen beansprucht nicht die gesamte verfügbare Breite der Zeile. Es passt sich der Größe seines Inhalts an und steht in derselben Zeile wie benachbarte Elemente.

Die Situation ist exakt dieselbe wie beim Paar display: block und display: inline-block. Ein Block-Element nimmt die gesamte Zeile ein, ein Inline-Element nur so viel, wie der Inhalt benötigt. Genauso verhält es sich hier: flex erzeugt einen Flex-Container auf Block-Ebene, während inline-flex einen auf Inline-Ebene erzeugt.

In der Praxis eröffnet das Szenarien, die mit normalem flex zusätzliche Wrapper, Breiten-Hacks oder float-Relikte erfordern würden.

💡 Kurzer Überblick:

• display: inline-flex erzeugt einen Flex-Container, der sich wie ein Inline-Element verhält und nicht die gesamte Zeile einnimmt. Die Breite eines solchen Containers wird durch seinen Inhalt bestimmt, nicht durch das Elternelement.
• Alle Flex-Eigenschaften funktionieren innerhalb von inline-flex exakt genauso wie bei normalem display: flex. Es gibt keine Unterschiede in der Anordnung der Kinder; der einzige Unterschied liegt im externen Verhalten des Containers.
• Der primäre Anwendungsfall: Badges, Tags und Buttons mit Icons, bei denen ein einzelnes inline-flex am Element die Kombination aus einem Flex-Elternteil und einem Inline-Kind ersetzt. Sie erhalten eine Inhaltszentrierung ohne zusätzliche Wrapper.
• Andere display-Werte haben ebenfalls Inline-Gegenstücke: inline-block, inline-table und inline-grid funktionieren nach demselben Prinzip. Die interne Layout-Logik bleibt erhalten; nur das externe Verhalten des Containers ändert sich.

Praxisfall: Badges mit Icons

Stellen Sie sich eine typische Aufgabe vor. Eine Seite benötigt eine Zeile mit Badges. Jedes Badge hat ein Icon und Text, wobei das Icon vertikal und horizontal in einem farbigen Kreis zentriert ist. Die Badges selbst stehen wie normaler Text in einer Zeile und brechen in die nächste Zeile um, wenn sie nicht mehr passen.

Wenn Sie display: flex für die Badges setzen, dehnt sich jedes über die volle Breite des Elternelements aus. Die Badges ordnen sich in einer Spalte an, nicht in einer Zeile. Sie können das mit einem Wrapper beheben, der display: flex am Elternelement hat. Aber warum einen zusätzlichen Wrapper hinzufügen, wenn Sie inline-flex haben?

Die HTML-Struktur ist elementar:

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
  <!-- other badges -->
9
</div>

Beachten Sie, dass der Wrapper .badges-list nichts für die Inline-Positionierung tut. Das übernimmt .c-badge selbst.

CSS für das Badge:

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

Das ist alles. Jedes Badge ist ein Flex-Container mit Inline-Verhalten. Das Icon darin wird mit justify-content und align-items zentriert. Die Badges selbst ordnen sich in einer Zeile an und brechen in eine neue Zeile um, wenn die Breite nicht ausreicht. Genau das, was das Design erforderte, ohne zusätzliche Wrapper.

Inline-flex vs. flex: ein visueller Vergleich

Den Unterschied versteht man am besten, wenn man sich zwei identische Sätze von Containern ansieht, einen mit display: flex und den anderen mit display: inline-flex.

Beispiel 1: display: flex

Drei Eltern-Container mit blauem Hintergrund. In jedem befinden sich drei rote Kinder mit flex: 1. Die Elternelemente haben display: flex.

Ergebnis: Jeder blaue Container nimmt die gesamte Zeile ein. Die Kinder darin dehnen sich auf gleiche Breite aus. Die Container sind in einer Spalte untereinander gestapelt.

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

Beispiel 2: display: inline-flex

Dieselben drei Container, aber mit display: inline-flex. Die Kinder haben zusätzlich min-width: 50px, damit der Container nicht auf null kollabiert.

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

Ergebnis: Die Container stehen in einer einzigen Zeile. Jeder nimmt exakt so viel Breite ein, wie seine Kinder benötigen (50px × 3 = 150px). Sie verhalten sich wie Wörter in einem Satz und brechen erst in die nächste Zeile um, wenn der Platz ausgeht.

Die Kernaussage: Für die Flex-Items innerhalb des Containers gibt es keinerlei Unterschied. Eigenschaften wie justify-content und align-items sowie gap und flex-direction funktionieren identisch. Der einzige Unterschied besteht darin, wie der Container selbst mit der Außenwelt interagiert: als Block- oder als Inline-Element.

Wann man inline-flex einsetzt: 4 Szenarien

Nicht jedes Layout erfordert inline-flex. Aber es gibt Situationen, in denen es die Aufgabe eleganter löst als die Kombination aus flex + Wrapper.

1. Eine Liste von Tags oder Badges. Der häufigste Anwendungsfall. Jedes Tag ist ein Flex-Container mit einem Icon und Text, die mittig ausgerichtet sind. Die Tags selbst fließen in einer Zeile mit Umbruch. inline-flex am Tag, und es werden keine Wrapper benötigt.

2. Buttons mit Icons in einer Textzeile. Wenn ein Aktions-Button (Kopieren, Öffnen, Löschen) direkt innerhalb eines Absatzes oder einer Überschrift sitzt. Mit inline-flex können Sie das Icon im Button zentrieren, ohne den Button aus dem Textfluss zu reißen.

3. Eine Inline-Toolbar. Eine Reihe von Formatierungs-Buttons in einem WYSIWYG-Editor. Jeder Button ist ein inline-flex-Container mit einem Icon darin. Alle Buttons stehen in einer Zeile und brechen auf natürliche Weise um.

4. Vertikale Zentrierung im Inline-Kontext. Ein Klassiker unter den CSS-Problemen: ein Icon vertikal relativ zum angrenzenden Text zu zentrieren. vertical-align: middle funktioniert nur sporadisch. inline-flex mit align-items: center funktioniert immer.

Hier ist der Code für die Szenarien 2 und 3, damit sie nicht theoretisch bleiben.

Button mit Icon im Text (Szenario 2). Angenommen, Sie benötigen einen „Kopieren"-Button innerhalb eines Absatzes. Er muss im Textfluss bleiben und darf die Zeile nicht brechen. Hier das minimale 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
}

Drei Zeilen Flexbox-Zentrierung, und das Icon im Button ist auf beiden Achsen ausgerichtet. Keine line-height-Hacks, kein position: relative plus transform. Der Button sitzt direkt im Text wie ein weiteres Wort.

Toolbar (Szenario 3). Ein typischer WYSIWYG-Editor: Buttons für Fett, Kursiv und Link stehen in einer Zeile. Jeder Button ist ein inline-flex-Container:

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
}

Die Buttons brechen um, wenn das Fenster schmaler wird, ohne zusätzliche Wrapper. Für die übergeordnete Toolbar eignet sich display: flex mit flex-wrap: wrap und gap: 4px gut. Sie erhalten eine zweistufige Flex-Komposition: Der äußere Container verwaltet die Zeile der Buttons, und jeder Button zentriert sein Icon.

Fallstricke von inline-flex

Drei nicht offensichtliche Situationen, die Stunden in den DevTools sparen.

Leerraum zwischen Elementen. Wie inline-block reagieren Elemente mit inline-flex empfindlich auf Leerraum im HTML. Drei <span>-Elemente mit inline-flex in getrennten Zeilen haben eine Lücke von 4-5 Pixeln. Die Lösung: font-size: 0 am Elternelement mit Wiederherstellung an den Kindern, Entfernen des Leerraums zwischen den Tags oder eine Kombination aus display: flex am Elternelement plus inline-flex an den Kindern.

text-align funktioniert nicht bei Flex-Kindern. Bei inline-block werden Elemente über text-align: center am Elternelement ausgerichtet. Bei inline-flex funktioniert diese Technik nur, solange die Kinder nicht selbst zu Flex-Containern geworden sind. Flex-Items reagieren nicht auf text-align. Richten Sie Container über justify-content an einem Flex-Elternteil oder margin: auto aus.

Standard-Flex-Richtung. inline-flex ordnet Kinder standardmäßig in einer Zeile an (flex-direction: row), genau wie display: flex. Wenn Sie eine Spalte innerhalb eines Inline-Containers erwarten, setzen Sie flex-direction: column explizit. Die Spezifikation kann keine Gedanken lesen.

Verwandte: andere Inline-display-Varianten

inline-flex hat konzeptionelle Geschwister. Fast jeder Block-display-Wert hat ein Inline-Gegenstück:

Der Mechanismus ist überall derselbe: Die interne Layout-Logik bleibt vollständig erhalten, nur das externe Verhalten des Containers ändert sich. Bei inline-grid ist die Geschichte dieselbe: ein Grid-Container, der in einer Zeile steht, anstatt die volle Breite des Elternelements einzunehmen.

In der Praxis wird inline-flex häufiger verwendet als inline-grid. Der Grund ist einfach: Flex-Container werden häufiger für kleine Komponenten benötigt (Badge, Button, Icon-Gruppe), bei denen Inline-Verhalten genau das ist, was gebraucht wird. Grid-Layouts werden öfter auf große strukturelle Blöcke angewendet, bei denen inline-Verhalten keinen Zweck erfüllt.

Die Browser-Unterstützung für inline-flex ist praktisch vollständig. Die Eigenschaft erschien in der Spezifikation Flexible Box Layout Module Level 1 (W3C Candidate Recommendation, 2016) und funktioniert in allen modernen Browsern: Chrome seit Version 29 (2013), Firefox seit Version 20 (2013), Safari seit Version 9 (2015) und Edge seit Version 12 (2015). Internet Explorer 11 unterstützt inline-flex mit Einschränkungen, aber laut Daten von StatCounter für 2025 liegt der IE11-Anteil bei weniger als 0,1% des globalen Marktes. Für Projekte, die IE11 unterstützen müssen, testen Sie inline-flex manuell: Dieser Browser verhält sich bei einigen flex-basis- und min-height-Fehlern unvorhersehbar.

⁉️🤔 Häufig gestellte Fragen

Was ist der Unterschied zwischen display: inline-flex und display: flex?

display: flex erzeugt einen Flex-Container auf Block-Ebene, der die gesamte verfügbare Breite der Zeile einnimmt. display: inline-flex erzeugt einen Flex-Container auf Inline-Ebene, dessen Breite durch seinen Inhalt bestimmt wird und der in derselben Zeile wie andere Elemente stehen kann. Für Kinder innerhalb des Containers gibt es keinen Unterschied: Alle Flex-Eigenschaften funktionieren in beiden Fällen gleich.

Wann ist inline-flex besser als inline-block?

inline-block gibt Ihnen keine Kontrolle über die Ausrichtung der Kinder. Wenn Sie ein Icon in einem Button sowohl vertikal als auch horizontal zentrieren müssen, zwingt inline-block Sie dazu, sich an line-height-Hacks und vertical-align zu erinnern. inline-flex mit justify-content: center und align-items: center erledigt das ohne Klimmzüge.

Kann man gap mit inline-flex verwenden?

Ja, gap funktioniert in inline-flex exakt genauso wie in normalem flex. Sie legen den Abstand zwischen Flex-Items fest, und der Browser wendet ihn unabhängig davon an, ob der Container auf Block- oder Inline-Ebene ist. Unterstützung für gap in Flexbox: alle modernen Browser seit 2021.

Beeinflusst inline-flex verschachtelte Flex-Container?

Nein. Die display-Eigenschaft wird nicht vererbt. Wenn sich ein Element mit display: flex innerhalb eines inline-flex-Containers befindet, ist es ein normaler Flex-Container auf Block-Ebene. Das Inline-Verhalten gilt nur für das Element, bei dem Sie explizit inline-flex setzen.

*inline-flex** und Barrierefreiheit: Gibt es Fallstricke?*

Screenreader machen keinen Unterschied zwischen flex und inline-flex. Beide Werte beeinflussen nur das visuelle Layout und ändern weder Semantik noch Lesereihenfolge. Die Flex-Eigenschaft order ändert die visuelle Reihenfolge, aber nicht die Reihenfolge im Accessibility Tree; das gilt für beide display-Werte.

Was man verwenden sollte: flex oder inline-flex

Die Wahl läuft auf eine einfache Frage hinaus: Soll der Container in einer Zeile mit seinen Nachbarn stehen oder die volle Breite seines Elternelements einnehmen?

Wenn Sie eine Komponente stylen (Badge, Button mit Icon, Tag, Toolbar-Element), verwenden Sie inline-flex. Sie erhalten Flex-Zentrierung des Inhalts bei gleichzeitig natürlichem Inline-Verhalten ohne zusätzliche Wrapper.

Wenn Sie eine Sektion, Karte, Kopfzeile, Fußzeile oder ein Layout stylen, bleiben Sie bei display: flex. Block-Verhalten ist hier angemessen: Der Container soll seine Zeile einnehmen und sich nicht zwischen benachbarte Elemente quetschen.

Die goldene Regel: Öffnen Sie die DevTools und sehen Sie sich das Element an. Wenn es mit anderen in einer Zeile steht, verwenden Sie inline-flex. Wenn es in einer eigenen Zeile steht, verwenden Sie flex. So einfach ist das.