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.

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

Prise en charge de inline-block

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 8
Support complet 8
Support partiel 6
Notes
Notes Until Internet Explorer 8, inline-block is only for natural inline elements.
Opera Support complet 7Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Prise en charge de inline-table

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 3IE Support complet 8Opera Support complet 7Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Prise en charge de inline-flex

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Firefox 28 added multi-line flexbox support.
Aucun support 18 — ?
Désactivée
Désactivée From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support complet 8
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -ms-inline-flexbox
Opera Support complet 16
Support complet 16
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet 12Firefox Android Support complet 20
Notes
Support complet 20
Notes
Notes Firefox 28 added multi-line flexbox support.
Aucun support 18 — ?
Désactivée
Désactivée From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 16
Support complet 16
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Prise en charge de inline-grid

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 57Edge Support complet 16
Support complet 16
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Support complet 52IE Support partiel 10
Préfixée Notes
Support partiel 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Internet Explorer implements an older version of the specification.
Opera Support complet 44Safari ? WebView Android Support complet 57Chrome Android Support complet 57Edge Mobile Support complet 16
Support complet 16
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Android Support complet 52Opera Android Support complet 44Safari iOS ? Samsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,