1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: CSS Display
slug: Web/CSS/CSS_Display
tags:
- Aperçu
- CSS
- CSS Display
- Reference
translation_of: Web/CSS/CSS_Display
---
{{CSSRef}}
**L'affichage CSS** (_CSS Display)_ est un module CSS qui définit la façon dont l'arbre des boîtes pour la mise en forme est généré à partir de l'arbre des éléments du document et qui définit les propriétés qui le contrôlent.
## Référence
### Propriétés CSS
- {{cssxref("display")}}
### Types de donnée CSS
- {{CSSxRef("<display-outside>")}}
- {{CSSxRef("<display-inside>")}}
- {{CSSxRef("<display-listitem>")}}
- {{CSSxRef("<display-box>")}}
- {{CSSxRef("<display-internal>")}}
- {{CSSxRef("<display-legacy>")}}
## Guides
### Disposition en flux (`display: block`, `display: inline`)
- [Les dispositions de bloc et en ligne dans le flux normal](/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)
- [La disposition en flux et les dépassements](/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow)
- [La disposition en flux et les modes d'écriture](/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes)
- [Explications sur les contextes de formatage](/fr/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained)
- [Être ou non dans le flux](/fr/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow)
### Les boîtes flexibles (`display: flex`)
- [Concepts de base des boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox)
- [Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible)
- [Contrôler les proportions des objets flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal)
- [_Mixins_ Flexbox pour les différents navigateurs](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins)
- [Maîtriser le passage à la ligne des objets flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles)
- [Ordonner les objets flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles)
- [Les relations entre les boîtes flexibles et les autres méthodes de disposition](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions)
- [La rétrocompatiblité des boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox)
- [Les cas d'usage type pour les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox)
### Les grilles CSS (`display: grid`)
- [Concepts de base des grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base)
- [Les relations entre les grilles et les autres méthodes de disposition](/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition)
- [Le placement sur les lignes](/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS)
- [Les modèles de zone de grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille)
- [Les dispositions utilisant les lignes nommées](/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille)
- [Le placement automatique dans les grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS)
- [L'alignement des boîtes dans les grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)
- [Les grilles, les valeurs logiques et les modes d'écriture](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture)
- [Les grilles et l'accessibilité](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité)
- [Les grilles et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive)
- [Réaliser des dispositions courantes à l'aide de grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS)
## Spécifications
| Spécification | État | Commentaires |
| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------ |
| {{SpecName('CSS3 Display', '#the-display-properties', 'display')}} | {{Spec2('CSS3 Display')}} | Ajout des valeurs `run-in`, `flow`, `flow-root`, `contents` et de la syntaxe avec plusieurs mots-clés. |
| {{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}} | {{Spec2('CSS2.1')}} | Ajout des valeurs pour les tableaux et ajout de `inline-block`. |
| {{SpecName('CSS1', '#display', 'display')}} | {{Spec2('CSS1')}} | Spécification initiale. Valeurs de base : `none`, `block`, `inline` et `list-item`. |
En plus du module de spécification _CSS Display_ de niveau 3, d'autres modules de spécifications définissent le comportement à avoir selon les différentes valeurs de `display`.
## Compatibilité des navigateurs
{{Compat("css.properties.display", 10)}}
|
