Le concept de display en CSS

Introduction

La propriété display en CSS est un élément fondamental qui détermine comment un élément HTML est affiché sur une page web. Elle influence le type de boîte utilisé par chaque élément, ainsi que son agencement et sa position dans le document.

Syntaxe

La syntaxe de cette propriété est simple :

display: ;

Les valeurs disponibles pour la propriété display sont les suivantes : - inline - block - contents - flex - grid - inline-block - inline-flex - inline-grid - list-item - run-in - table - table-caption - table-column-group - table-header-group - table-footer-group - table-row-group - table-cell - table-column - table-row - none - initial - inherit

Différences entre les valeurs de display

L’utilisation de différentes valeurs de la propriété display permet de contrôler l'affichage des éléments. Voici quelques-unes des valeurs les plus courantes : 1. display: block Les éléments définis avec display: block; s'affichent comme des éléments de bloc. Cela signifie qu'un saut de ligne est créé après l'élément et qu'il occupe toute la largeur de son conteneur parent. css .block-element { display: block; }

1. display: inline Les éléments avec display: inline; sont des éléments en ligne. Ils n'induise pas de saut de ligne et occupe seulement l'espace requis par leur contenu. css .inline-element { display: inline; }
2. display: inline-block Les éléments avec display: inline-block; se comportent comme des éléments inline mais permettent de spécifier largeur et hauteur. css .inline-block-element { display: inline-block; }
3. display: none Les éléments avec display: none; sont complètement invisibles sur la page et ne prennent pas d'espace dans le flux du document. css .hidden-element { display: none; }
4. display: flex Les éléments avec display: flex; créent un conteneur flexible, facilitant la création de mises en page réactives. css .flex-container { display: flex; }
5. display: grid Utiliser display: grid; crée un conteneur de grille permettant de définir des lignes et des colonnes pour une mise en page en deux dimensions. css .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }

Remplacement des valeurs de display

Il est possible de remplacer les valeurs de display par défaut en utilisant la spécificité CSS. Voici un exemple :

/* CSS d'origine */
.element { display: inline; }
/* Remplacement avec une spécificité plus élevée */
.container .element { display: block; }

Considérations pour la conception réactive

La propriété display peut être couplée avec des media queries pour adapter le design selon la taille de l’écran. Par exemple :

@media (max-width: 768px) {
  .element {
    display: none; /* Masquer l'élément sur les écrans plus petits */
  }
}
@media (min-width: 768px) {
  .element {
    display: block; /* Afficher l'élément sur les écrans plus larges */
  }
}

Comparaison entre display: grid et display: flex

CSS Grid et Flexbox sont deux outils puissants pour le design. Le choix entre display: flex et display: grid dépend des besoins de mise en page. Flexbox est parfait pour des mises en page linéaires, tandis que Grid est préférable pour des conceptions complexes avec plusieurs colonnes. Voici un exemple de différence :

.flex-container {
  display: flex;
  justify-content: space-around;
}
.flex-item {
  background-color: cyan;
  padding: 20px;
  margin: 2px;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
}
.grid-item {
  background-color: orange;
  padding: 20px;
}
.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.item-2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.item-3 {
  grid-column: 1;
  grid-row: 2 / span 2;
}
.item-4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}
.item-6 {
  grid-column: 1 / span 3;
}

Utilisation pratique

Pour illustrer l'utilisation de display: flex, voici comment transformer un élément div en un conteneur flexible :

  
Premier élément
  
Deuxième élément

.flexdiv {
  display: flex;
}

Cela alignera les éléments paragraphe horizontalement, permettant une mise en page fluide.