CSS: “display”: X não é um valor de “display”.

A propriedade CSS display controla como um elemento gera caixas no layout. Determina se um elemento se comporta como um elemento de nível de bloco ou de nível inline e define o modelo de layout para os seus filhos (por exemplo, flow, flexbox, ou grid). Como display é fundamental para o layout da página, usar um valor inválido significa que o navegador irá ignorar completamente a declaração, potencialmente causando renderização inesperada.

Causas comuns deste erro incluem:

• Gralhas — escrever dipslay: block, display: blok, ou display: flx em vez das palavras-chave corretas.
• Confundir valores de outras propriedades — usar valores como center, hidden, absolute, ou relative, que pertencem a propriedades como text-align, visibility, ou position, não display.
• Valores inventados ou obsoletos — usar valores não-standard ou deprecados que os navegadores não reconhecem, como display: box (uma sintaxe flexbox antiga com prefixo sem o prefixo).
• Prefixos de fornecedor em falta — algumas sintaxes mais antigas como -webkit-flex eram válidas em certos navegadores mas não são valores CSS standard.

Os valores válidos para display incluem: block, inline, inline-block, flex, inline-flex, grid, inline-grid, flow-root, none, contents, table, table-row, table-cell, table-caption, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, list-item, e a sintaxe multi-palavra-chave como block flow, block flex, ou inline grid.

Usar valores CSS inválidos é um problema porque os navegadores descartam silenciosamente declarações que não compreendem. Isto significa que o seu layout pretendido não será aplicado, e fazer debug pode ser difícil uma vez que não aparece nenhum erro visível no navegador. Validar o seu CSS deteta estes erros precocemente.

Exemplos

Inválido: gralha no valor de display

<div style="display: flx;">
  <p>Este contentor deveria ser um contentor flex.</p>
</div>

Corrigido: valor flex correto

<div style="display: flex;">
  <p>Este contentor é agora um contentor flex.</p>
</div>

Inválido: usar um valor de outra propriedade

<nav style="display: center;">
  <a href="/">Início</a>
</nav>

O valor center não pertence a display. Se o objetivo é centrar conteúdo, use um valor display válido combinado com propriedades de alinhamento apropriadas.

Corrigido: usar flex com centramento

<nav style="display: flex; justify-content: center;">
  <a href="/">Início</a>
</nav>

Inválido: usar um valor de position em vez de um valor de display

<div style="display: absolute;">
  <p>Conteúdo de sobreposição</p>
</div>

Corrigido: usar a propriedade correta

<div style="position: absolute; display: block;">
  <p>Conteúdo de sobreposição</p>
</div>

Inválido: usar um valor não-standard

<ul style="display: box;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Corrigido: usar o valor flexbox standard

<ul style="display: flex;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Saiba mais:

MDN Reference

MDN: CSS display property

→