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.
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
Affiche les éléments en ligne, certaines balises l'ont par défaut comme par exemple les span, a, img
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
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.
Ces valeurs de display concernent l'affichage à l'intérieur de notre élément.
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