Display

La propriété display définit le type de rendu utilisé par un élément HTML.
Les valeurs courantes de display incluent block, inline, inline-block, none, flex et grid, chacune affectant la manière dont l'élément est affiché dans le flux du document.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/WNWXzeG">
css-display-0</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

Le choix de la valeur display va influencé la manière dont l'élément interagit avec les autres éléments et comment il est positionné sur la page.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/ExJbwRo">
css-display-1</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

block

Les éléments de type block occupent toute la largeur disponible et commencent sur une nouvelle ligne dans le flux du document.
Exemples : div, p, heading (h1-h6), li.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/ZEZaRzb">
css-display-block-01</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

inline

Les éléments de type inline ne commencent pas sur une nouvelle ligne et prennent juste la largeur nécessaire à leur contenu.
Exemples : span, a, img.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/GRLOGKB">
css-display-inline-01</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

inline-block

Les éléments de type inline-block sont similaires aux éléments inline, mais ils respectent les propriétés width, height.
Ils ne commencent pas sur une nouvelle ligne.
Exemples : input, button.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/LYvOrYz">
Untitled</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

none

L'élément est retiré complètement du flux du document et n'est pas rendu sur la page.
C'est comme s'il n'existait pas.
Exemple : utilisé pour cacher temporairement un élément et le rendre visible ensuite via javascript.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/VwNrdLQ">
css-display-none-01</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

flex

Les éléments de type flex utilisent un modèle de disposition flexbox, ce qui permet de créer des mises en page flexibles et réactives.
Ils se comportent comme des éléments en bloc et peuvent être alignés et distribués dans l'espace disponible de manière flexible.
Flexbox est vue de manière plus complète dans un autre chapitre.
Exemples : div avec display: flex.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/zYXPLKL">
css-display-flex-01</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

grid

Les éléments de type grid utilisent un modèle de disposition de grille, qui permet de créer des mises en page basées sur une grille.
Ils se comportent comme des éléments en bloc et peuvent être placés dans des cellules spécifiques de la grille.
Exemples : div avec display: grid.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/oNOoMYO">
css-display-grid-01</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

remarque

On va retrouver un système de grid dans de nombreux framework css comme Bulma, Bootstrap, PicoCss, Materialize.
La grid des framework est une sourcouche maison du grid natif en css. Savoir l'utliser donne de la liberté et permet de facilement comprendre les grid de framework

Display

block​

inline​

inline-block​

none​

flex​

grid​