display-inside
==============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
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.multi-keyword\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flow-root

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.table\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.grid

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.ruby\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `display`
    + `<display-outside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* Concepts de base des boîtes flexibles (*flexbox*)
* Concepts de base des grilles CSS