<display-legacy>

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-table O 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.

<display-legacy> = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid   

No exemplo abaixo, estamos criando um contêiner flex inline com a palavra-chave herdada inline-flex.

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;
}

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-box>