<display-legacy>
O CSS 2 usou uma sintaxe de palavra-chave única para o display , 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-block-
O 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-table-
O
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-flex-
O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.
É equivalente a
inline flex. inline-grid-
O 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 class="container"> <div>Flex Item</div> <div>Flex Item</div> </div> Not a flex item CSS
.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; }