Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
<display-legacy>
O CSS 2 usou uma sintaxe de palavra-chave única para odisplay , exigindo palavras-chave separadas para variantes em nível de bloco e em linha do mesmo modo de layout. Esta página detalha esses valores.
Sintaxe
inline-blockO elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo circundante, como se fosse uma única caixa embutida (se comportando como um elemento substituído).
É equivalente a
inline flow-root.inline-tableO
inline-tableO valor não possui um mapeamento direto em HTML. Ele se comporta como um HTML<table>elemento, mas como uma caixa embutida, em vez de uma caixa no nível do bloco. Dentro da caixa da tabela há um contexto em nível de bloco.É equivalente a
inline table.inline-flexO elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.
É equivalente a
inline flex.inline-gridO elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de grade.
É equivalente a
inline grid.
Sintaxe formal
<display-legacy> =
inline-block|
inline-table|
inline-flex|
inline-grid
Exemplo
No exemplo abaixo, estamos criando um contêiner flex inline com a palavra-chave herdada inline-flex.
HTML
<div> <div>Flex Item</div> <div>Flex Item</div></div>Not a flex itemCSS
.container { display: inline-flex;}Result
Na nova sintaxe, o contêiner flex inline seria criado usando dois valores, inline para o tipo de exibição externo e flex para o tipo de exibição interno.
.container { display: inline flex;}