🎯 Objectifs de cet exercice :
Comprendre les différentes valeurs de la propriété CSS display et leur impact sur le rendu des éléments.
📦 Les différentes valeurs de display :
- inline : L'élément est affiché dans le flux en ligne, sans rupture de ligne. Il ne prend que l'espace nécessaire à son contenu.
- block : L'élément occupe toute la largeur disponible et commence toujours sur une nouvelle ligne.
- inline-block : L'élément est en ligne mais accepte des propriétés de dimensionnement (largeur, hauteur) comme un élément bloc.
- flex : Active Flexbox - permet de disposer les éléments enfants de manière flexible et responsive.
- inline-flex : Combine flex avec le comportement inline (le conteneur lui-même est inline).
- grid : Active CSS Grid - système de mise en page bidimensionnel en grille (lignes et colonnes).
- none : Cache complètement l'élément - il n'occupe aucun espace dans la page.
🚀 Avec le framework Bootstrap :
Bootstrap propose des classes utilitaires pour gérer le display facilement :
d-inline: Rend un élément inlined-inline-block: Rend un élément inline-blockd-block: Force un élément à se comporter comme un blockd-flex: Active un conteneur flexboxd-inline-flex: Combine inline et flexboxd-grid: Active un conteneur gridd-none: Masque l'élément
💡 Conseil : Testez en redimensionnant votre navigateur et en inspectant le code avec les outils de développement (F12) pour voir comment chaque display se comporte !
