O que é display: inline-flex

O Flexbox tornou-se um elemento essencial do layout web quotidiano. Todos os programadores de front-end conhecem e usam display: flex. Mas esta propriedade tem um parente menos conhecido, display: inline-flex. Raramente se escreve sobre ele e é usado ainda menos. Isso é um erro.

A diferença resume-se a uma frase: inline-flex cria um contentor flex que se comporta como um elemento inline. Os seus filhos são itens flex comuns com todas as capacidades do Flexbox. O elemento pai, no entanto, não ocupa toda a largura disponível da linha. Ajusta-se ao tamanho do seu conteúdo e posiciona-se na mesma linha que os elementos vizinhos.

A situação é exatamente como o par display: block e display: inline-block. Um elemento de bloco ocupa a linha inteira, um elemento inline ocupa apenas o espaço necessário ao conteúdo. O mesmo se aplica aqui: flex define um contentor flex de nível de bloco, enquanto inline-flex define um de nível inline.

Na prática, isto abre cenários que exigiriam wrappers extra, hacks de largura ou relíquias como float com flex normal.

💡 Visão geral rápida:

• display: inline-flex cria um contentor flex que se comporta como um elemento inline e não ocupa a linha inteira. A largura desse contentor é determinada pelo seu conteúdo, não pelo elemento pai.
• Todas as propriedades flex funcionam dentro de inline-flex exatamente da mesma forma que em display: flex normal. Não há diferenças na disposição dos filhos; a única diferença está no comportamento externo do contentor.
• O principal caso de uso: badges, tags e botões com ícones, onde um único inline-flex no elemento substitui a combinação de um pai flex e um filho inline. Obtém o centramento do conteúdo sem wrappers extra.
• Outros valores de display também têm equivalentes inline: inline-block, inline-table e inline-grid funcionam com o mesmo princípio. A lógica de layout interno é preservada; apenas o comportamento externo do contentor muda.

Caso real: badges com ícones

Imagine uma tarefa típica. Uma página precisa de uma linha de badges. Cada uma tem um ícone e texto, com o ícone centrado vertical e horizontalmente dentro de um círculo colorido. As próprias badges alinham-se numa linha como texto normal e passam para a linha seguinte quando não cabem.

Se definir display: flex nas badges, cada uma estica-se para a largura total do elemento pai. As badges alinhar-se-ão numa coluna, não numa linha. Pode corrigir isto com um wrapper que tenha display: flex no pai. Mas para quê adicionar um wrapper extra quando tem inline-flex?

A estrutura HTML é 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>

Note que o wrapper .badges-list não faz nada para o posicionamento inline. A própria .c-badge trata disso.

CSS para a badge:

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

É tudo. Cada badge é um contentor flex com comportamento inline. O ícone no interior é centrado usando justify-content e align-items. As próprias badges alinham-se numa linha e passam para uma nova linha quando não há largura suficiente. Exatamente o que o design exigia, sem wrappers extra.

Inline-flex vs flex: uma comparação visual

A melhor forma de entender a diferença é observar dois conjuntos idênticos de contentores, um com display: flex e o outro com display: inline-flex.

Exemplo 1: display: flex

Três contentores pai com fundo azul. Dentro de cada um estão três filhos vermelhos com flex: 1. Os pais têm display: flex.

Resultado: cada contentor azul ocupa a linha inteira. Os filhos no interior esticam-se para larguras iguais. Os contentores são empilhados numa coluna, um abaixo do outro.

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

Exemplo 2: display: inline-flex

Os mesmos três contentores, mas com display: inline-flex. Os filhos têm min-width: 50px adicionado para que o contentor não colapse para zero.

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

Resultado: os contentores ficam numa única linha. Cada um ocupa exatamente a largura que os seus filhos precisam (50px × 3 = 150px). Comportam-se como palavras numa frase e passam para a linha seguinte apenas quando o espaço se esgota.

A conclusão principal: para os itens flex dentro do contentor, não há diferença alguma. Propriedades como justify-content e align-items, bem como gap e flex-direction, funcionam de forma idêntica. A única diferença é como o próprio contentor interage com o mundo exterior: como um bloco ou como um elemento inline.

Quando usar inline-flex: 4 cenários

Nem todos os layouts exigem inline-flex. Mas há situações em que resolve a tarefa de forma mais elegante do que a combinação de flex + wrapper.

1. Uma lista de tags ou badges. O caso de uso mais comum. Cada tag é um contentor flex com um ícone e texto alinhados ao centro. As próprias tags fluem numa linha com quebra. inline-flex na tag e sem necessidade de wrappers.

2. Botões com ícones numa linha de texto. Quando um botão de ação (copiar, abrir, eliminar) está diretamente dentro de um parágrafo ou cabeçalho. inline-flex permite centrar o ícone dentro do botão sem retirar o botão do fluxo de texto.

3. Uma barra de ferramentas inline. Um conjunto de botões de formatação num editor WYSIWYG. Cada botão é um contentor inline-flex com um ícone dentro. Todos os botões ficam numa linha e quebram naturalmente.

4. Centramento vertical num contexto inline. Um clássico ponto problemático do CSS: centrar um ícone verticalmente em relação ao texto adjacente. vertical-align: middle funciona esporadicamente. inline-flex com align-items: center funciona sempre.

Aqui está o código para os cenários 2 e 3, para que não fiquem na teoria.

Botão com ícone no texto (cenário 2). Suponha que precisa de um botão "copiar" dentro de um parágrafo. Deve permanecer no fluxo de texto e não quebrar a linha. Aqui está o CSS mínimo:

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
}

Três linhas de centramento flexbox e o ícone dentro do botão fica alinhado em ambos os eixos. Sem hacks de line-height, sem position: relative mais transform. O botão fica no texto como outra palavra qualquer.

Barra de ferramentas (cenário 3). Um editor WYSIWYG típico: botões de negrito, itálico e link numa linha. Cada botão é um contentor 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
}

Os botões quebram quando a janela se estreita, sem wrappers adicionais. Para a barra de ferramentas pai, display: flex com flex-wrap: wrap e gap: 4px funciona bem. Obtém uma composição flex de dois níveis: o contentor exterior gere a linha de botões e cada botão centra o seu ícone.

Armadilhas do inline-flex

Três situações não óbvias que poupam horas nas DevTools.

Espaço em branco entre elementos. Tal como inline-block, os elementos com inline-flex são sensíveis ao espaço em branco no HTML. Três elementos <span> com inline-flex em linhas separadas terão um espaço de 4-5 píxeis. A correção: font-size: 0 no pai com restauro nos filhos, remoção do espaço em branco entre tags ou uma combinação de display: flex no pai mais inline-flex nos filhos.

text-align não funciona nos filhos flex. Para inline-block, os elementos são alinhados via text-align: center no pai. Com inline-flex, esta técnica funciona apenas enquanto os filhos não se tornarem eles próprios contentores flex. Os itens flex não respondem a text-align. Alinhe os contentores via justify-content num pai flex ou margin: auto.

Direção flex padrão. inline-flex, tal como display: flex, dispõe os filhos em linha por padrão (flex-direction: row). Se espera uma coluna dentro de um contentor inline, defina flex-direction: column explicitamente. A especificação não lê a mente do programador.

Parentes: outras variantes de display inline

inline-flex tem parentes conceptuais. Quase todos os valores de display de bloco têm um equivalente inline:

O mecanismo é o mesmo em todos: a lógica de layout interno é totalmente preservada, apenas o comportamento externo do contentor muda. Com inline-grid, a história é a mesma: um contentor de grelha que se posiciona numa linha em vez de ocupar a largura total do pai.

Na prática, inline-flex é usado com mais frequência do que inline-grid. A razão é simples: os contentores flex são mais necessários para componentes pequenos (badge, botão, grupo de ícones), onde o comportamento inline é exatamente o pretendido. Os layouts de grelha são mais aplicados a grandes blocos estruturais, onde o comportamento inline não serve qualquer propósito.

O suporte dos navegadores para inline-flex é praticamente completo. A propriedade surgiu na especificação Flexible Box Layout Module Level 1 (W3C Candidate Recommendation, 2016) e funciona em todos os navegadores modernos: Chrome desde a versão 29 (2013), Firefox desde a versão 20 (2013), Safari desde a versão 9 (2015) e Edge desde a versão 12 (2015). O Internet Explorer 11 suporta inline-flex com ressalvas, mas de acordo com os dados do StatCounter para 2025, a quota do IE11 é inferior a 0,1% do mercado global. Para projetos que tenham de suportar o IE11, teste inline-flex manualmente: este navegador comporta-se de forma imprevisível com alguns bugs de flex-basis e min-height.

⁉️🤔 Perguntas frequentes

Qual é a diferença entre display: inline-flex e display: flex?

display: flex cria um contentor flex de nível de bloco que ocupa toda a largura disponível da linha. display: inline-flex cria um contentor flex de nível inline cuja largura é determinada pelo seu conteúdo e pode ficar na mesma linha que outros elementos. Para os filhos dentro do contentor, não há diferença: todas as propriedades flex funcionam da mesma forma em ambos os casos.

Quando é que inline-flex é melhor do que inline-block?

inline-block não lhe dá controlo sobre o alinhamento dos filhos. Se precisar de centrar um ícone dentro de um botão tanto vertical como horizontalmente, inline-block vai forçá-lo a lembrar-se de hacks de line-height e vertical-align. inline-flex com justify-content: center e align-items: center faz isto sem malabarismos.

Pode usar gap com inline-flex?

Sim, gap funciona em inline-flex exatamente da mesma forma que em flex normal. Define o espaçamento entre itens flex e o navegador aplica-o independentemente de o contentor ser de nível de bloco ou inline. Suporte para gap em flexbox: todos os navegadores modernos desde 2021.

O inline-flex afeta contentores flex aninhados?

Não. A propriedade display não é herdada. Se um elemento com display: flex estiver dentro de um contentor inline-flex, será um contentor flex de nível de bloco normal. O comportamento inline aplica-se apenas ao elemento no qual define explicitamente inline-flex.

*inline-flex** e acessibilidade: há alguma armadilha?*

Os leitores de ecrã não fazem distinção entre flex e inline-flex. Ambos os valores afetam apenas o layout visual e não alteram a semântica ou a ordem de leitura. A propriedade flex order altera a ordem visual, mas não a ordem na árvore de acessibilidade; isto é verdade para ambos os valores de display.

O que usar: flex ou inline-flex

A escolha resume-se a uma pergunta simples: o contentor deve ficar numa linha com os seus vizinhos ou ocupar a largura total do seu pai?

Se estiver a estilizar um componente (badge, botão com ícone, tag, item de barra de ferramentas), use inline-flex. Obterá o centramento flex do conteúdo preservando o comportamento inline natural sem wrappers adicionais.

Se estiver a estilizar uma secção, cartão, cabeçalho, rodapé ou layout, mantenha-se com display: flex. O comportamento de bloco é apropriado aqui: o contentor deve ocupar a sua linha, não espremer-se entre elementos vizinhos.

A regra de ouro: abra as DevTools e observe o elemento. Se estiver numa linha com outros, use inline-flex. Se estiver na sua própria linha, use flex. É assim tão simples.