Che cos'è display: inline-flex

Flexbox è diventato un pilastro del layout web quotidiano. Ogni sviluppatore front-end conosce e usa display: flex. Ma questa proprietà ha un fratello meno noto, display: inline-flex. Se ne scrive raramente e si usa ancora meno. È un errore.

La differenza si riassume in una frase: inline-flex crea un contenitore flex che si comporta esso stesso come un elemento inline. I suoi figli sono normali elementi flex con tutte le capacità di Flexbox. Il genitore, tuttavia, non occupa l'intera larghezza disponibile della riga. Si adatta alla dimensione del suo contenuto e si posiziona sulla stessa riga degli elementi adiacenti.

La situazione è esattamente come la coppia display: block e display: inline-block. Un elemento block occupa l'intera riga, un elemento inline occupa solo quanto richiesto dal contenuto. Lo stesso vale qui: flex crea un contenitore flex a livello di blocco, mentre inline-flex ne crea uno a livello inline.

Nella pratica, questo apre scenari che con il normale flex richiederebbero wrapper aggiuntivi, trucchi sulla larghezza o vecchie soluzioni con float.

💡 Panoramica rapida:

• display: inline-flex crea un contenitore flex che si comporta come un elemento inline e non occupa l'intera riga. La larghezza di tale contenitore è determinata dal suo contenuto, non dal suo genitore.
• Tutte le proprietà flex funzionano all'interno di inline-flex esattamente come nel normale display: flex. Non ci sono differenze nel modo in cui i figli vengono disposti; l'unica differenza è nel comportamento esterno del contenitore.
• Il caso d'uso principale: badge, tag e pulsanti con icone, dove un singolo inline-flex sull'elemento sostituisce la combinazione di un genitore flex e un figlio inline. Si ottiene il centraggio del contenuto senza wrapper aggiuntivi.
• Anche altri valori di display hanno controparti inline: inline-block, inline-table e inline-grid funzionano sullo stesso principio. La logica di layout interna viene preservata; cambia solo il comportamento esterno del contenitore.

Caso reale: badge con icone

Immagina un'attività tipica. Una pagina ha bisogno di una riga di badge. Ognuno ha un'icona e del testo, con l'icona centrata verticalmente e orizzontalmente all'interno di un cerchio colorato. I badge stessi stanno in riga come un normale testo e vanno a capo quando non c'è spazio.

Se imposti display: flex sui badge, ognuno si estenderà per l'intera larghezza del genitore. I badge si disporranno in colonna, non in riga. Puoi risolvere con un wrapper che abbia display: flex sul genitore. Ma perché aggiungere un wrapper extra quando hai inline-flex?

La struttura HTML è elementare:

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>

Nota che il wrapper .badges-list non fa nulla per il posizionamento inline. Se ne occupa direttamente .c-badge.

CSS per il badge:

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

Tutto qui. Ogni badge è un contenitore flex con comportamento inline. L'icona al suo interno è centrata usando justify-content e align-items. I badge stessi si allineano in riga e vanno a capo quando la larghezza non è sufficiente. Esattamente ciò che richiedeva il design, senza wrapper aggiuntivi.

Inline-flex vs flex: un confronto visivo

Il modo migliore per capire la differenza è osservare due set identici di contenitori, uno con display: flex e l'altro con display: inline-flex.

Esempio 1: display: flex

Tre contenitori genitore con sfondo blu. All'interno di ciascuno ci sono tre figli rossi con flex: 1. I genitori hanno display: flex.

Risultato: ogni contenitore blu occupa l'intera riga. I figli all'interno si estendono in larghezze uguali. I contenitori sono impilati in colonna, uno sotto l'altro.

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

Esempio 2: display: inline-flex

Gli stessi tre contenitori, ma con display: inline-flex. Ai figli è stato aggiunto min-width: 50px per evitare che il contenitore collassi a zero.

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

Risultato: i contenitori stanno su una singola riga. Ognuno occupa esattamente la larghezza necessaria ai suoi figli (50px × 3 = 150px). Si comportano come parole in una frase e vanno a capo solo quando lo spazio finisce.

Il concetto chiave: per gli elementi flex all'interno del contenitore, non c'è alcuna differenza. Proprietà come justify-content e align-items, così come gap e flex-direction, funzionano in modo identico. L'unica differenza è come il contenitore stesso interagisce con il mondo esterno: come un blocco o come un elemento inline.

Quando usare inline-flex: 4 scenari

Non tutti i layout richiedono inline-flex. Ma ci sono situazioni in cui risolve il compito in modo più elegante rispetto alla combinazione flex + wrapper.

1. Una lista di tag o badge. Il caso d'uso più comune. Ogni tag è un contenitore flex con un'icona e testo allineati al centro. I tag stessi fluiscono in riga andando a capo. inline-flex sul tag e nessun wrapper necessario.

2. Pulsanti con icone in una riga di testo. Quando un pulsante di azione (copia, apri, elimina) si trova direttamente dentro un paragrafo o un'intestazione. inline-flex ti permette di centrare l'icona dentro il pulsante senza estrarre il pulsante dal flusso del testo.

3. Una toolbar inline. Un set di pulsanti di formattazione in un editor WYSIWYG. Ogni pulsante è un contenitore inline-flex con un'icona all'interno. Tutti i pulsanti stanno in riga e vanno a capo naturalmente.

4. Centraggio verticale in un contesto inline. Un classico punto dolente dei CSS: centrare verticalmente un'icona rispetto al testo adiacente. vertical-align: middle funziona in modo incostante. inline-flex con align-items: center funziona sempre.

Ecco il codice per gli scenari 2 e 3, così non restano teorici.

Pulsante con icona nel testo (scenario 2). Supponi di aver bisogno di un pulsante "copia" dentro un paragrafo. Deve restare nel flusso del testo e non spezzare la riga. Ecco il CSS minimo:

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
}

Tre righe di centraggio flexbox e l'icona dentro il pulsante è allineata su entrambi gli assi. Niente trucchi con line-height, niente position: relative più transform. Il pulsante sta nel testo come un'altra parola.

Toolbar (scenario 3). Un tipico editor WYSIWYG: i pulsanti grassetto, corsivo e link stanno in riga. Ogni pulsante è un contenitore 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
}

I pulsanti vanno a capo quando la finestra si restringe, senza wrapper aggiuntivi. Per la toolbar genitore, display: flex con flex-wrap: wrap e gap: 4px funziona bene. Ottieni una composizione flex a due livelli: il contenitore esterno gestisce la riga di pulsanti e ogni pulsante centra la sua icona.

Insidie di inline-flex

Tre situazioni non ovvie che fanno risparmiare ore in DevTools.

Spazio bianco tra gli elementi. Come inline-block, gli elementi con inline-flex sono sensibili agli spazi bianchi nell'HTML. Tre elementi <span> con inline-flex su righe separate avranno uno spazio di 4-5 pixel. La soluzione: font-size: 0 sul genitore con ripristino sui figli, rimozione degli spazi bianchi tra i tag o una combinazione di display: flex sul genitore più inline-flex sui figli.

text-align non funziona sui figli flex. Per inline-block, gli elementi sono allineati tramite text-align: center sul genitore. Con inline-flex, questa tecnica funziona solo finché i figli non sono diventati essi stessi contenitori flex. Gli elementi flex non rispondono a text-align. Allinea i contenitori tramite justify-content su un genitore flex o margin: auto.

Direzione flex predefinita. inline-flex, come display: flex, dispone i figli in riga per impostazione predefinita (flex-direction: row). Se ti aspetti una colonna dentro un contenitore inline, imposta esplicitamente flex-direction: column. La specifica non legge nel pensiero dello sviluppatore.

Parenti: altre varianti di display inline

inline-flex ha fratelli concettuali. Quasi ogni valore di display a blocco ha una controparte inline:

Il meccanismo è lo stesso ovunque: la logica di layout interna è completamente preservata, cambia solo il comportamento esterno del contenitore. Con inline-grid la storia è la stessa: un contenitore griglia che sta in riga invece di occupare l'intera larghezza del genitore.

Nella pratica, inline-flex si usa più spesso di inline-grid. Il motivo è semplice: i contenitori flex sono più comunemente necessari per piccoli componenti (badge, pulsante, gruppo di icone), dove il comportamento inline è esattamente ciò che serve. I layout a griglia sono più spesso applicati a grandi blocchi strutturali, dove il comportamento inline non ha scopo.

Il supporto dei browser per inline-flex è praticamente completo. La proprietà è apparsa nella specifica Flexible Box Layout Module Level 1 (W3C Candidate Recommendation, 2016) e funziona in tutti i browser moderni: Chrome dalla versione 29 (2013), Firefox dalla versione 20 (2013), Safari dalla versione 9 (2015) ed Edge dalla versione 12 (2015). Internet Explorer 11 supporta inline-flex con alcune riserve, ma secondo i dati StatCounter per il 2025, la quota di IE11 è inferiore allo 0,1% del mercato globale. Per i progetti che devono supportare IE11, testa inline-flex manualmente: questo browser ha un comportamento imprevedibile con alcuni bug di flex-basis e min-height.

⁉️🤔 Domande frequenti

Qual è la differenza tra display: inline-flex e display: flex?

display: flex crea un contenitore flex a livello di blocco che occupa l'intera larghezza disponibile della riga. display: inline-flex crea un contenitore flex a livello inline la cui larghezza è determinata dal suo contenuto e può stare sulla stessa riga di altri elementi. Per i figli all'interno del contenitore non c'è differenza: tutte le proprietà flex funzionano allo stesso modo in entrambi i casi.

Quando inline-flex è meglio di inline-block?

inline-block non ti dà alcun controllo sull'allineamento dei figli. Se devi centrare un'icona dentro un pulsante sia verticalmente che orizzontalmente, inline-block ti costringerà a ricordare trucchi con line-height e vertical-align. inline-flex con justify-content: center e align-items: center lo fa senza acrobazie.

Si può usare gap con inline-flex?

Sì, gap funziona in inline-flex esattamente come nel normale flex. Imposti la spaziatura tra gli elementi flex e il browser la applica indipendentemente dal fatto che il contenitore sia a livello di blocco o inline. Supporto per gap in flexbox: tutti i browser moderni dal 2021.

inline-flex influisce sui contenitori flex annidati?*

No. La proprietà display non viene ereditata. Se un elemento con display: flex è dentro un contenitore inline-flex, sarà un normale contenitore flex a livello di blocco. Il comportamento inline si applica solo all'elemento su cui imposti esplicitamente inline-flex.

*inline-flex** e accessibilità: ci sono insidie?*

I lettori di schermo non fanno distinzione tra flex e inline-flex. Entrambi i valori influenzano solo il layout visivo e non cambiano la semantica o l'ordine di lettura. La proprietà flex order cambia l'ordine visivo ma non l'ordine nell'albero di accessibilità; questo vale per entrambi i valori di display.

Cosa usare: flex o inline-flex

La scelta si riduce a una semplice domanda: il contenitore deve stare in riga con i suoi vicini o occupare l'intera larghezza del suo genitore?

Se stai stilizzando un componente (badge, pulsante con icona, tag, elemento di una toolbar), usa inline-flex. Otterrai il centraggio flex del contenuto preservando il naturale comportamento inline senza wrapper aggiuntivi.

Se stai stilizzando una sezione, una card, un'intestazione, un footer o un layout, usa display: flex. Qui il comportamento a blocco è appropriato: il contenitore deve occupare la sua riga, non infilarsi tra gli elementi vicini.

La regola d'oro: apri DevTools e guarda l'elemento. Se è su una riga con altri, usa inline-flex. Se è su una riga propria, usa flex. È semplice.