Comprendre les modes d'affichage CSS

Chaque décision de mise en page que vous prenez en CSS remonte à une seule propriété : display. Pourtant, la plupart des explications la traitent comme une liste plate de valeurs à mémoriser. Cette approche passe à côté de l’essentiel. La propriété display contrôle en réalité deux choses distinctes : comment un élément participe à la mise en page de son parent, et comment il organise ses propres enfants. Comprendre cette double nature transforme votre façon de penser les fondamentaux de la mise en page CSS moderne.

Le modèle mental moderne : types d’affichage externes et internes

La propriété CSS display définit deux comportements distincts :

Le type d’affichage externe détermine comment la boîte de l’élément se comporte par rapport à ses éléments frères. Prend-elle toute la largeur et commence-t-elle sur une nouvelle ligne ? Ou se positionne-t-elle en ligne avec le contenu environnant ?

Le type d’affichage interne contrôle comment les enfants de l’élément sont disposés. Suivent-ils le flux normal du document ? Ou participent-ils à un contexte flex ou grid ?

Lorsque vous écrivez display: flex, vous dites en réalité : « Cet élément se comporte comme un block à l’extérieur, et ses enfants utilisent la mise en page flex à l’intérieur. » La spécification CSS Display Level 3 a rendu cela explicite avec une syntaxe à mots-clés multiples — display: block flex — bien que les mots-clés simples restent valides et largement utilisés.

Ce modèle externe-et-interne clarifie pourquoi certaines combinaisons existent et vous aide à prédire le comportement sans mémorisation.

Block vs Inline : les fondations

Block et inline représentent les deux types d’affichage externes fondamentaux dans le flux normal.

Les éléments block génèrent une boîte qui :

• Commence sur une nouvelle ligne
• S’étend pour remplir la largeur disponible
• Respecte les propriétés width, height, margin et padding sur tous les côtés

Les éléments inline génèrent des boîtes qui :

• S’écoulent avec le contenu textuel
• Ne prennent que l’espace requis par leur contenu
• Ignorent les propriétés width et height (sauf pour les éléments remplacés comme les images)
• Ne répondent qu’aux marges et au padding horizontaux (les marges verticales sont ignorées, et le padding vertical n’affecte pas la mise en page environnante)

/* Block : remplit la largeur du conteneur, s'empile verticalement */
.card { display: block }

/* Inline : s'écoule avec le texte, dimensionné par le contenu */
.label { display: inline }

Comprendre block vs inline vs flex vs grid commence ici. Block et inline décrivent la participation au flux normal — l’algorithme de mise en page par défaut que les navigateurs utilisent avant que vous n’appliquiez quoi que ce soit d’autre.

Flex et Grid : types d’affichage internes modernes

Lorsque vous avez besoin de plus de contrôle sur la disposition des enfants, vous modifiez le type d’affichage interne.

Quand utiliser Flex

Flexbox excelle dans les mises en page unidimensionnelles — distribuer des éléments le long d’un seul axe :

.nav-list {
  display: flex;
  gap: 1rem
}

Utilisez flex lorsque la taille du contenu doit influencer la mise en page, lorsque vous avez besoin que les éléments s’enveloppent naturellement, ou lorsque l’alignement le long d’un axe est votre préoccupation principale.

Quand utiliser Grid

Grid gère les mises en page bidimensionnelles — contrôlant simultanément les lignes et les colonnes :

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
}

Choisissez grid lorsque vous avez besoin d’un placement précis, d’éléments qui se chevauchent, ou de mises en page où la structure compte plus que la taille du contenu.

Flex et grid créent tous deux de nouveaux contextes de formatage pour leurs enfants, ce qui affecte le comportement des marges, des flottants et d’autres propriétés à l’intérieur.

Display None : supprimer complètement les éléments

Définir display: none retire un élément de la mise en page entièrement. Le document s’affiche comme si l’élément n’existait pas. Cela diffère de visibility: hidden, qui masque l’élément tout en préservant son espace.

Notez que display: none retire également les éléments de l’arbre d’accessibilité — les lecteurs d’écran ne les annonceront pas.

Une note sur Display Contents

La valeur display: contents fait disparaître la boîte d’un élément tout en conservant ses enfants dans la mise en page. Bien que cela semble utile pour aplatir les éléments conteneurs dans les contextes flex ou grid, cela comporte des risques d’accessibilité significatifs. Les implémentations des navigateurs ont historiquement retiré l’élément de l’arbre d’accessibilité, cassant la sémantique pour les tableaux, les listes et les éléments interactifs. Bien que la prise en charge des navigateurs se soit améliorée, approchez avec prudence et testez minutieusement.

Choisir le bon mode d’affichage CSS

Commencez par cette question : quel problème résolvez-vous ?

• Flux normal du document ? Utilisez block ou inline
• Distribution unidimensionnelle ? Utilisez flex
• Placement bidimensionnel ? Utilisez grid
• Retirer de la mise en page ? Utilisez none

Conclusion

La propriété CSS display ne consiste pas à mémoriser des valeurs — il s’agit de comprendre que chaque élément a un rôle externe et une stratégie de mise en page interne. Le type externe régit comment l’élément se positionne parmi ses frères, tandis que le type interne dicte comment ses enfants sont organisés. Une fois que cette double nature est comprise, choisir le bon mode d’affichage devient simple, et les décisions de mise en page découlent naturellement du problème que vous essayez de résoudre.

FAQ

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.