A partir do Chrome 115, há vários valores para a propriedade de exibição CSS. display: flex se torna display: block flex e display: block se torna display: block flow. Os valores únicos que você conhece agora são considerados legados, mas são mantidos nos navegadores para compatibilidade com versões anteriores.

Por que está muito atrasado?

Resumindo: muda a forma como podemos explicar coisas como o Modelo Box. A especificação ainda é um CR Snapshot, o que significa que o W3C coleta experiências dos implementadores para finalizar o padrão. Portanto, parte disso ainda pode mudar.

O retrabalho divide o tipo de exibição em duas partes: o tipo de exibição externa e o tipo de exibição interna.

O tipo de exibição externa determina como a própria caixa principal participa do layout do fluxo.

O tipo de exibição interno determina como suas caixas descendentes são dispostas (exceto para elementos substituídos, que é um pouco mais complexo).

Portanto, display: flex se torna display: block flex, o que significa que o tipo de exibição externo é block (ele se comporta como um elemento de bloco na parte externa), mas seus elementos filhos são renderizados de acordo com o layout flex.

Este é o mesmo comportamento de antes, mas com essa mudança, podemos falar sobre a influência da propriedade display em relação aos elementos filhos e aos elementos circundantes. Na minha opinião, este modelo mental facilita a criação de layouts mais previsíveis e é mais simples de explicar os diferentes modos de layout e seus efeitos.

Em cursos ou tutoriais mais recentes, uma boa explicação do modelo de caixa precisa cobrir não apenas margens, bordas, preenchimentos, largura e altura, mas também o tamanho da caixa e a propriedade de exibição.

Quais são os valores válidos da propriedade display?

Como já mencionado, algumas propriedades antigas agora são legadas. Aqui estão todas as propriedades válidas:

Para a exibição de sintaxe de múltiplos valores: tipos externos válidos de tipo interno de tipo externo são block, inline e run-in. Os tipos de exibição interna válidos são flow, flow-root, table, flex, grid e rubi.

Também existem valores únicos válidos: list-item, contents e none.

Além disso, CSS tem alguns valores de exibição internos que permanecem válidos. Esses valores serão calculados ao usar tipos de exibição de tabela ou Ruby.

As seguintes combinações agora são herdadas: inline-block, inline-table, inline-flex e inline-grid . Eles podem ser substituídos por seus equivalentes de vários valores, por exemplo: display: inline flex.

Multi-valores são suportados em versões recentes de navegadores modernos: https://caniuse.com/mdn-css_properties_display_multi-keyword_values

Caniuse para valores de múltiplas palavras-chave da propriedade de exibição.

Isso é tudo, pessoal!

Muito obrigado pela leitura!