From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/display-legacy/index.md | 132 ++++++++++++++++--------------- 1 file changed, 68 insertions(+), 64 deletions(-) (limited to 'files/fr/web/css/display-legacy/index.md') diff --git a/files/fr/web/css/display-legacy/index.md b/files/fr/web/css/display-legacy/index.md index 759ab90d24..35894b40a8 100644 --- a/files/fr/web/css/display-legacy/index.md +++ b/files/fr/web/css/display-legacy/index.md @@ -7,95 +7,99 @@ tags: - Type de donnée translation_of: Web/CSS/display-legacy --- -
{{CSSRef}}
- -

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 {{HTMLElement("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

+{{CSSRef}} + +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 {{HTMLElement("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 {{CSSSyntax}} -

Exemples

+## Exemples -

Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique inline-flex.

+Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique `inline-flex`. -

CSS

+### CSS -
.container {
+```css
+.container {
   display: inline-flex;
 }
-
+``` -

HTML

+### HTML -
<div class="container">
-  <div>Élément flexible</div>
-  <div>Élément flexible</div>
-</div>
+```html
+

+  
Élément flexible

+  
Élément flexible

+

 
 Pas d'élément flexible
-
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples", 300, 150)}}

- +{{EmbedLiveSample("Exemples", 300, 150)}} -

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).

+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 {
+```css
+.container {
   display: inline flex;
-}
+} +``` + +## Compatibilité des navigateurs -

Compatibilité des navigateurs

+### Prise en charge de `inline-block` -

Prise en charge de inline-block

+{{Compat("css.properties.display.inline-block", 10)}} -

{{Compat("css.properties.display.inline-block", 10)}}

+### Prise en charge de `inline-table` -

Prise en charge de inline-table

+{{Compat("css.properties.display.inline-table", 10)}} -

{{Compat("css.properties.display.inline-table", 10)}}

+### Prise en charge de `inline-flex` -

Prise en charge de inline-flex

+{{Compat("css.properties.display.inline-flex", 10)}} -

{{Compat("css.properties.display.inline-flex", 10)}}

+### Prise en charge de `inline-grid` -

Prise en charge de inline-grid

+{{Compat("css.properties.display.inline-grid", 10)}} -

{{Compat("css.properties.display.inline-grid", 10)}}

+## Voir aussi -

Voir aussi

+- {{CSSxRef("display")}} - + - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-box>")}} -- cgit v1.2.3-54-g00ecf