Matricule-se
Voltar para o blog
Full Stack

Display CSS: Nova Sintaxe e Como Usar

Rodrigo Silva Harder

Aprenda a usar a propriedade display CSS com a nova sintaxe de múltiplos valores. Veja exemplos práticos e descubra como combinar estilos em um único comando.

A propriedade display do CSS ganhou sintaxe de dois valores: o primeiro define o comportamento externo do elemento (block ou inline) e o segundo, o layout interno (flow, flex, grid). Assim, display: block flex equivale ao antigo display: flex — a novidade torna explícito o que cada palavra controla.

Introdução ao Novo Display CSS

Fala, impressionador!

Se você já trabalha com CSS, com certeza conhece a propriedade display. É aquela que você usa para definir se um elemento é block, inline, flex ou grid, certo? Mas o que muita gente não sabe é que essa propriedade ganhou uma atualização importante que pode facilitar muito o seu trabalho.

Neste guia completo, você vai entender tudo sobre essa mudança: o que era antes, o que mudou agora, e principalmente, como aplicar isso nos seus projetos reais.

Se quiser aprender mais sobre a atualização do display, vem comigo!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é a propriedade display no CSS?

A propriedade display é uma das mais importantes do CSS. Ela define como um elemento HTML se comporta na página, controlando tanto o próprio elemento quanto seus elementos filhos.

Tradicionalmente, você provavelmente já usou valores como:

  • block: o elemento ocupa toda a largura disponível;
  • inline: o elemento ocupa apenas o espaço necessário;
  • flex: permite criar layouts flexíveis;
  • grid: cria sistemas de grade;

O que mudou na propriedade display?

Antes, a propriedade display aceitava apenas um único valor por vez. Se você queria que um elemento fosse flex, escrevia display: flex. Já se o objetivo era que o layout ficasse  inline, no CSS era adicionado display: inline.

O problema é que muitas vezes precisávamos controlar dois comportamentos diferentes para dizer:

  1. Como o elemento pai se comportava no layout;
  2. Como o elemento filho se comportava dentro do elemento pai.

Para resolver isso, antigamente era necessário fazer algumas "gambiarras". Contudo, agora você pode combinar valores na mesma propriedade display!

Como funciona a nova sintaxe

A nova sintaxe permite que você especifique dois valores separados por espaço:

Codigo
display: [valor-externo] [valor-interno];
  • Valor externo: define como o elemento se comporta em relação aos outros elementos (block ou inline);
  • Valor interno: define como os filhos se comportam dentro dele (flex, grid, etc.).

Por exemplo, eu tenho o código abaixo:

HTML:

HTML
<section>
  <a href=#>Link de teste</a>
  <div class="demo">
    <div class="box">Item 1 </div>
    <div class="box">Item 2 </div>
    <div class="box">Item 3 </div>
  </div>
</section>

CSS:

CSS
:root{
  font-family:Arial;
  font-weight:600;
  font-size:24px;
}

.demo{
  display:flex;
  gap:16px;
  padding:16px;
  background:#1b294f;
  border-radius:8px;
}

.box{
  background:#2e4ba5;
  padding:16px 20px;
  border-radius:8px;
  flex:1;
  text-align:center;
  color:#fff;
}

A estrutura HTML apresenta uma seção com um link e um bloco com três itens. Por padrão o elemento <a> é inline e ocupa toda a linha. Já a `<div>` que envolve os três itens se comporta como um bloco e os elementos dentro dela assumem os itens dentro da <div> são distribuídos de forma flexível.

Link na primeira linha e um retângulo azul marinho com três retângulos azuis distribuídos de forma flexível

Ao aplicar a nova estrutura do display com o valores ìnline flex, por exemplo, o código ficaria assim:

CSS
.demo{
  display: inline flex;
  gap:16px;
  padding:16px;
  background:#1b294f;
  border-radius:8px;
}

Visualmente o elemento <div> que envolve os itens assume um comportamento inline e ocupa só o espaço necessário enquanto os três itens permanecem com layout flexível.

Link e retângulo azul marinho na mesma linha. Os três retângulos dentro do retângulo azul continuam distribuídos de forma flexível

Caso queira, você pode consultar todos os valores possíveis na documentação oficial do MDN.

Vantagens da nova sintaxe

A nova sintaxe do display traz várias vantagens:

  1. Mais controle: você define o comportamento externo e interno separadamente;
  2. Menos código: não precisa mais de gambiarras com wrappers extras;
  3. Mais semântico: o código fica mais claro sobre a intenção;
  4. Compatível: funciona junto com a sintaxe antiga.

Compatibilidade com navegadores

A nova sintaxe multi-word está disponível nos navegadores mais modernos. Os valores tradicionais continuam funcionando normalmente, então você pode usar tanto:

Codigo
display: flex; /* sintaxe antiga */
display: block flex; /* sintaxe nova */

Ambos funcionam! A diferença é que a sintaxe nova te dá mais controle sobre o comportamento do elemento pai.

Ícone Full StackFull Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agoraSeta para a direita
Fundo Full StackTelas Full Stack
Luz Full Stack

Perguntas frequentes

1. O que mudou na propriedade display?

Ela passou a aceitar dois valores: display: block flex, inline grid, block flow-root. Antes, palavras únicas como flex e inline-block misturavam os dois papéis num termo só; a nova sintaxe separa o lado de fora (como o elemento se posiciona) do lado de dentro (como organiza os filhos).

2. display: block flex é igual a display: flex?

Sim, são equivalentes — flex sozinho sempre significou 'bloco por fora, flexbox por dentro'. O mesmo vale para inline flex e inline-flex, block grid e grid. Os valores antigos continuam funcionando: a forma nova é uma escrita mais clara, não uma substituição obrigatória.

3. Os navegadores já suportam a sintaxe de dois valores?

Os principais navegadores modernos (Chrome, Edge, Firefox e Safari) suportam nas versões atuais. Para bases de usuários com navegadores antigos, a recomendação prática é seguir com os valores de uma palavra — o resultado visual é o mesmo.

4. Qual a diferença entre valores externos e internos?

O externo (block, inline) define a relação do elemento com os vizinhos: ocupar a linha inteira ou fluir no texto. O interno (flow, flex, grid) define o sistema de layout dos filhos. A sintaxe de dois valores expressa exatamente essa dupla natureza de cada caixa do CSS.

Conclusão

A propriedade display do CSS evoluiu e agora permite combinar valores para ter mais controle sobre o layout. Você pode definir separadamente como o elemento se comporta externamente (block ou inline) e como os filhos se organizam internamente (flex, grid, etc.).

Essa mudança simplifica o código e elimina a necessidade de algumas soluções alternativas que usávamos antes. Experimente a nova sintaxe nos seus projetos e veja como ela pode facilitar a criação de layouts.

Se você quer aprender mais sobre desenvolvimento web e CSS, conheça nossa Formação Fullstack Impressionador e domine as tecnologias mais usadas no mercado!

Além disso, caso prefira esse conteúdo no formato de vídeo-aula, pode acessar o vídeo no nosso canal do Youtube.

O que você aprende neste vídeo

Resposta rápida: A aula mostra, no inspecionar do navegador, que display: flex organiza os filhos mas deixa o contêiner como bloco, e como a sintaxe de dois valores separa as duas coisas. Você aprende a escrever display: inline flex e inline grid para ter o contêiner em linha com os filhos em flex ou grid, e a achar as combinações no MDN.

Neste vídeo (7 min):

  • 1:02 - Como o display funcionava até aqui: um único valor por vez, como block, inline, flex ou grid
  • 1:15 - O que cada valor faz: block ocupa toda a largura, inline não aceita margem vertical nem altura, flex distribui os filhos e grid monta uma grade
  • 2:07 - A novidade: descrever os dois comportamentos num único display com duas palavras, em vez de valores compostos como inline-flex
  • 2:20 - O exemplo prático: um contêiner de demonstração com display: flex e três caixas de mesmo tamanho e espaçamento
  • 3:05 - No inspecionar do navegador, o flex organiza os filhos mas faz o pai se comportar como bloco, e a troca para block e inline mostra a diferença
  • 3:50 - Link é inline por padrão e fica ao lado do outro, enquanto um elemento de bloco desce para a linha de baixo
  • 4:20 - display: inline flex na prática: o contêiner passa a se comportar como inline e os filhos continuam em flex
  • 4:45 - A mesma lógica com inline grid: a grade continua valendo para os filhos enquanto o contêiner fica em linha
  • 5:05 - O primeiro valor formata o elemento por fora e o segundo formata a parte de dentro, e a combinação equivale ao antigo inline-flex
  • 5:35 - A página de display no MDN em inglês, com os valores tradicionais e a sintaxe de múltiplas palavras

Trechos do vídeo:

  • Na sintaxe de dois valores do display, a primeira palavra diz como o elemento se comporta por fora, em relação aos vizinhos, e a segunda diz como ele organiza os filhos por dentro
  • Um contêiner com display: flex distribui os filhos, mas ele próprio se comporta como bloco e ocupa toda a largura disponível
  • display: inline flex mantém o contêiner com o tamanho do conteúdo, como um elemento em linha, enquanto os filhos seguem as regras do flexbox: é o resultado do antigo inline-flex, escrito de forma explícita
  • Links são inline por padrão e ficam lado a lado, enquanto um elemento de bloco ocupa a largura toda e desce para a linha seguinte
  • Um elemento inline não aceita margem vertical nem altura definida, por isso ocupa só o espaço do próprio conteúdo

Hashtag Treinamentos

Para acessar publicações de Full Stack, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?







Posts mais recentes de Full Stack

Posts mais recentes da Hashtag Treinamentos

Rodrigo Silva Harder

Autor do artigo

Rodrigo Silva Harder

Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.

Ver mais posts