<display-inside>
Le type de données CSS <display-inside>
définit 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
Valeurs valides pour <display-inside>
:
flow
-
L'élément dispose son contenu en utilisant la mise en forme de flux (mise en forme bloc et en ligne).
Si son type d'affichage externe est
inline
et qu'il participe à un contexte de formatage bloc ou en ligne, il génère une boîte en ligne. Sinon, il génère une boîte conteneur de bloc.Selon la valeur d'autres propriétés (comme
position
,float
ouoverflow
) et selon qu'il participe lui-même à un contexte de formatage bloc ou en ligne, il établit soit un nouveau contexte de formatage de bloc pour son contenu, soit il intègre son contenu dans le contexte de formatage parent. flow-root
-
L'élément génère une boîte de type bloc qui établit un nouveau contexte de formatage de bloc, définissant la racine du formatage.
table
-
Ces éléments se comportent comme les éléments HTML
<table>
. Ils définissent une boîte de niveau bloc. flex
-
L'élément se comporte comme un élément de type bloc et dispose son contenu selon le modèle flexbox.
grid
-
L'élément se comporte comme un élément de type bloc et dispose son contenu selon le modèle de grille.
ruby
-
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 les éléments HTML
<ruby>
correspondants.
Note :
Les navigateurs qui prennent en charge la syntaxe à deux valeurs, lorsqu'ils ne trouvent que la valeur interne (par exemple avec display: flex
ou display: grid
), définissent automatiquement la valeur externe à block
. Cela donne le comportement attendu : par exemple, si vous indiquez display: grid
, la boîte créée sur le conteneur de grille sera une boîte de niveau 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.
HTML
<div class="box">
<div class="float">Je suis une boîte flottante !</div>
<p>Je suis un contenu à l'intérieur du conteneur.</p>
</div>
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;
}
Résultat
Spécifications
Specification |
---|
CSS Display Module Level 3> # typedef-display-inside> |
Compatibilité des navigateurs
>css.properties.display.flow-root
Loading…
css.properties.display.table
Loading…
css.properties.display.flex
Loading…
css.properties.display.grid
Loading…
css.properties.display.ruby
Loading…
Voir aussi
-
Les types de données de la propriété
display
: