🎨 Résumé de l'attribut display en CSS

L'attribut display en CSS définit la façon dont un élément est affiché dans la page.

✨ Valeurs principales

1. block

• L'élément prend toute la largeur disponible.
• Il commence toujours sur une nouvelle ligne.

HTML

<span>
  Je suis un élément block
</span>

CSS

span{
  display: block; 
  background: lightblue; 
  padding: 11rem;
}

---

2. inline-block

• L'élément se place à la suite des autres (comme inline).
• Mais on peut définir sa largeur et sa hauteur, ainsi que des marges intérieures.
• Très utile pour créer des boutons ou encore pour aligner des blocs côte à côte.

HTML

<div>
  Box 1
</div>
<div>
  Box 2
</div>

CSS

div{
  display: inline-block; 
  width: 30%; 
  background: pink;
}

---

3. flex

• Permet d'organiser facilement les enfants en ligne ou en colonne.
• Permet d'aligner, de répartir et de gérer l'espace automatiquement.
• Très utilisé dans le design moderne.

HTML

<header>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</header>

CSS

header{
  display: flex; 
  justify-content: center;
  align-items: center;
}

---

👉 Résumé rapide :

• block : occupe toute la largeur, aucun autre élément peut se placer à côté.
• inline-block : s'aligne et peut avoir une taille définie. (inline ne peut avoir de taille)
• flex : organise facilement plusieurs éléments enfants.