display-inside

Ces mots-clés définissent le type d'affichage (display) pour l'intérieur de l'élément. Ce type servira à la disposition du contenu de l'élément (si ce contenu n'est pas un élément remplacé). Ces mots-clés sont des valeurs de la propriété display et peuvent, historiquement être utilisé seul, ou plus récemment (cf. la spécification de niveau 3), être utilisé en combinaison avec un mot-clé <display-outside>.

Syntaxe

Une valeur <display-inside> est définie avec l'un des mots-clés suivants :

flow Expérimental

L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « block and inline layout » en anglais).

Si le type d'affichage extérieur est inline ou run-in et que l'élément participe à un contexte de formatage bloc ou en ligne, il génèrera une boîte en ligne. Sinon, il génèrera un conteneur de bloc.

Selon la valeur d'autres propriétés (telles que position, float, ou overflow) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau contexte de formatage de bloc (BFC) pour son contenu ou intègre son contenu dans le contexte parent.

flow-root Expérimental

L'élément génère un bloc qui établit un nouveau contexte de formatage de bloc, définissant ainsi une nouvelle racine pour le formatage.

table

L'élément se comporte comme un élément HTML <table>. Il définit une boîte de bloc.

flex

L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle des boîtes flexibles.

grid

L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle des grilles.

ruby Expérimental

L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML <ruby>.

Note : Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <display-inside> lorsque c'est cohérent. Ainsi, avec display: flex ou display: grid, la valeur utilisée de <display-outside> sera nécessairement block. On a ainsi le résultat attendu car on doit avoir display: grid avec un conteneur qui soit un bloc.

Syntaxe formelle

<display-inside> = 
flow |
flow-root |
table |
flex |
grid |
ruby

Exemples

Dans l'exemple qui suit, la boîte parente est ciblée avec display: flow-root et crée donc un nouveau contexte de formatage de bloc qui contient l'élément flottant.

CSS

css
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

HTML

html
<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>

Résultat

Compatibilité des navigateurs

css.properties.display.flow-root

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
flow-root

Legend

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

Full support
Full support

css.properties.display.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
table

Legend

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

Full support
Full support

css.properties.display.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
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.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
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.

css.properties.display.ruby

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
ruby

Legend

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

Full support
Full support
No support
No support

Voir aussi