La propriété CSS display

Cela doit faire 4ans que j'utilise régulièrement display dans mon code, et souvent je choisis "la facilité" en utilisant flex.

Je me suis dit qu'il serait bien d'approfondir ma connaissance dans le sujet, c'est pourquoi ici on va voir plus en profondeur ce que nous propose ce display, et quels sont les meilleurs choix à faire en fonction de nos besoins.

Affichage extérieur de l'élément

Ces valeurs de display concernent uniquement l'affichage extérieur à l'élément, c'est à dire à comment l'élément s'affichera dans la page par rapport aux autres éléments, en ligne ou en block

display: inline

Affiche les éléments en ligne, certaines balises l'ont par défaut comme par exemple les span, a, img

display: block

Affiche les éléments en block, donc il y aura un retour à la ligne si jamais on place un élément block après d'autres éléments. Certaines balises l'ont par défaut, comme par exemple les h1, div, p, form, header, footer

display: run-in

Moins connu, affiche l'élément au niveau du bloc de l'élément qui suit, si l'élément qui suit est en display block. Pas compatible avec tous les navigateurs.

Affichage interne à l'élément

Ces valeurs de display concernent l'affichage à l'intérieur de notre élément.

display: flex

La propriété flex spécifie la capacité d'un élément à être flexible et se dimensionner en fonction de son parent. C'est aussi un raccourci pour flex-grow, flex-shrink et flex-basis. Lorsqu'on met display: flex, on ajoute en fait flex-grow: 0, flex-shrink: 1, flex-basis: auto

display: grid

display: table

display: flow et flow-root

display: ruby