<display-legacy>

CSS 2 utilisant une syntaxe avec un seul mot-clé comme valeur pour la propriété display, il fallait plusieurs mots-clés pour les différentes variantes bloc/en ligne d'un même mode. Cette page décrit ces valeurs.

Syntaxe

inline-block

L'élément s'inscrit dans le contenu environnant comme une boîte en ligne et organise son propre contenu en bloc.

Ce mot-clé est équivalent à la combinaison inline flow-root.

inline-table

La valeur inline-table n'a pas de correspondance directe en HTML. Un tel élément se comporte comme un élément HTML <table> avec une boîte en ligne et pas de bloc. À l'intérieur de la boîte de tableau, on aura un contexte de bloc.

Ce mot-clé est équivalent à la combinaison inline table.

inline-flex

L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des boîtes flexibles.

Ce mot-clé est équivalent à la combinaison inline flex.

inline-grid

L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des grilles CSS.

Ce mot-clé est équivalent à la combinaison inline grid.

Syntaxe formelle

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

Exemples

Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique inline-flex.

CSS

css
.container {
  display: inline-flex;
}

HTML

html
<div class="container">
  <div>Élément flexible</div>
  <div>Élément flexible</div>
</div>

Pas d'élément flexible

Résultat

Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (inline) et la seconde pour le mode d'affichage intérieur (flex).

css
.container {
  display: inline flex;
}

Compatibilité des navigateurs

css.properties.display.inline-block

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline-block

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.inline-table

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline-table

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.inline-flex

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline-flex

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

css.properties.display.inline-grid

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline-grid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi