Froggiesplaining :
🎯 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 inline
d-inline-block : Rend un élément inline-block
d-block : Force un élément à se comporter comme un block
d-flex : Active un conteneur flexbox
d-inline-flex : Combine inline et flexbox
d-grid : Active un conteneur grid
d-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 !