À partir de Chrome 115, il existe plusieurs valeurs pour la propriété d'affichage CSS. display : flex devient display : block flex et display : block devient display : block flow. Les valeurs uniques que vous connaissez sont désormais considérées comme héritées mais sont conservées dans les navigateurs pour des raisons de compatibilité ascendante.

Pourquoi est-ce attendu depuis longtemps ?

En bref : cela change la façon dont nous pouvons expliquer des choses telles que le modèle de boîte. La spécification est encore un CR Snapshot, ce qui signifie que le W3C collecte les expériences des implémenteurs pour finaliser la norme. Par conséquent, certains éléments pourraient encore changer.

La refonte divise le type d'affichage en deux parties : le type d'affichage externe et le type d'affichage interne.

Le type d'affichage externe dicte la manière dont la boîte principale elle-même participe à la disposition du flux.

Le type d'affichage interne dicte la disposition de ses boîtes descendantes (sauf pour les éléments remplacés, c'est un peu plus complexe).

Par conséquent display: flex devient display: block flex ce qui signifie que le type d'affichage externe est block (il se comporte comme un élément block à l'extérieur), mais ses éléments enfants sont rendus selon la disposition flex.

C'est le même comportement qu'avant, mais avec ce changement, nous pouvons parler de l'influence de la propriété display sur les éléments enfants et les éléments environnants. À mon avis, ce modèle mental facilite la création de mises en page plus prévisibles et il est plus simple d'expliquer les différents modes de mise en page et leurs effets.

Dans les cours ou didacticiels plus récents, une bonne explication du modèle de boîte doit couvrir non seulement les marges, les bordures, les remplissages, la largeur et la hauteur, mais également le dimensionnement de la boîte et la propriété d'affichage.

Quelles sont les valeurs valides de la propriété display ?

Comme déjà mentionné, certaines anciennes propriétés sont désormais héritées. Voici toutes les propriétés valides :

Pour l'affichage de la syntaxe à valeurs multiples : les types externes valides de type interne de type externe sont block, inline et run-in. Les types d'affichage internes valides sont flow, flow-root, table, flex, grid et rubis.

Il existe également des valeurs uniques valides : list-item, contents et none.

En plus de cela, CSS a certaines valeurs d'affichage internes qui restent valides. Ces valeurs seront calculées lors de l'utilisation de types d'affichage tableau ou Ruby.

Les combinaisons suivantes sont désormais héritées : inline-block, inline-table, inline-flex et inline-grid . Ils peuvent être remplacés par leurs équivalents à valeurs multiples, par exemple : display: inline flex.

Les valeurs multiples sont prises en charge sur les versions récentes des navigateurs modernes : https://caniuse.com/mdn-css_properties_display_multi-keyword_values

Caniuse pour les valeurs multi-mots-clés de la propriété d'affichage.

C'est tout, les amis !

Merci beaucoup d'avoir lu !