<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
Exemples
Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique inline-flex
.
CSS
.container {
display: inline-flex;
}
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
).
.container {
display: inline flex;
}
Compatibilité des navigateurs
css.properties.display.inline-block
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.