Bases de display : block, inline, flex, grid

La propriété display est la propriété CSS la plus importante pour la mise en page. Elle contrôle la manière dont un élément participe au flux de mise en page et la manière dont ses enfants sont disposés. Les valeurs les plus utilisées sont : block, inline, inline-block, flex, grid et none.

Les éléments de type bloc occupent la largeur totale de leur conteneur et commencent sur une nouvelle ligne. Exemples : <div>, <p>, <h1>. Vous pouvez définir une largeur, une hauteur, une marge et un remplissage intérieur sur les éléments de type bloc.

Les éléments en ligne s’insèrent dans le texte : ils ne commencent pas sur une nouvelle ligne. Exemples : <span>, <a>, <strong>. La largeur, la hauteur et les marges verticales n’ont aucun effet sur les éléments en ligne.

inline-block combine les deux : l’élément s’insère en ligne (comme du texte), mais accepte une largeur, une hauteur et une marge verticale (comme un bloc). C’est utile pour les boutons et les badges qui doivent tenir sur une ligne de texte.

display: none retire complètement l’élément de la mise en page : il n’occupe aucun espace. Utilisez visibility: hidden pour le masquer tout en conservant l’espace qu’il occupait.

display: flex transforme un élément en conteneur flexible. Ses enfants directs deviennent des éléments flexibles qui se disposent sur une ligne (par défaut) ou une colonne. Flexbox excelle dans la répartition de l’espace et l’alignement des éléments.

flex-direction : row | column. justify-content : space-between | center | flex-end. align-items : center | flex-start | flex-end | stretch. gap : espace entre les éléments sans utiliser de marge.

display: grid transforme un élément en conteneur de grille. Vous définissez les lignes et les colonnes avec grid-template-columns et grid-template-rows. La grille est idéale pour les mises en page et les grilles de cartes.

L’unité fr (fraction) répartit l’espace disponible. grid-template-columns: 1fr 2fr 1fr crée trois colonnes, dont la colonne centrale reçoit deux fois plus d’espace que les autres.

Utilisez Flexbox pour les mises en page à une dimension (une ligne de boutons, une pile de cartes). Utilisez Grid pour les mises en page à deux dimensions (la structure d’une page, une galerie de photos avec des lignes et des colonnes explicites). Les deux peuvent coexister dans la même page.

display: none : retire l’élément de la mise en page, qui devient inaccessible aux lecteurs d’écran. visibility: hidden : rend l’élément invisible, mais celui-ci occupe toujours de l’espace et reste dans l’arbre d’accessibilité. opacity: 0 : rend l’élément invisible, mais celui-ci occupe toujours de l’espace et reste accessible.

Vous devez créer une grille de cartes adaptative comportant plusieurs lignes et colonnes. Quelle valeur de display constitue le meilleur point de départ ?

block occupe toute la largeur. inline s’insère dans le texte. inline-block combine les deux. flex dispose les enfants à une dimension. grid dispose les enfants à deux dimensions. none retire l’élément de la mise en page. Maîtrisez ces valeurs et vous contrôlerez toutes les mises en page du Web.