La propriété display gére le mode d'affichage des boîtes des éléments HTML.

CSS 2 définit plusieurs modes d'affichage (bloc, en-ligne, liste, table et aucun) et CSS 3 ajoute des nouveaux modes (bloc en-ligne et flexbox). Nous étudierons dans cette partie plus particulièrement les modes bloc, en-ligne, bloc en-ligne et nous terminerons par les blocs flexibles.

### Comment est défini le mode d'affichage

La valeur par défaut de la propriété display est définie de la façon suivante :

1 tous les élements sont considérés comme des éléments en ligne (spécifications CSS)

2 les navigateurs redéfinissent comme des éléments de bloc : `address, article, aside, blockquote, body, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, main, nav, ol, p, pre, section, ul`

3 les navigateurs redéfinissent comme des éléments non affichés : `area, base, basefont, datalist, head, link, meta, param, script, style, title`

4 les navigateurs redéfinissent les lignes de lignes (`li`) avec un mode d'affichage particulier (`list_item`)

5 les navigateurs redéfinissent les éléments de tableau `table, caption, tr, col, colgroup, tbody, thead, tfoot, td, th` avec un mode d'affichage particulier (`table-header-group | table-footer-group | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group`).

En tant qu'auteur de feuille de style, nous pouvons modifier la valeur par défaut de la propriété display et ainsi modifier le la façon dont sera affiché l'élément HTML de notre choix.

### Masquer/afficher un élément

La manipulation la plus souvent faite de la propriété display consiste à utiliser alternativement les valeurs `none` et `block` pour masquer ou afficher un élément.
Remarque : masquer un élément entraîne que tous les éléments imbriqués dans cet éléments sont également masqué.

Une utilisation typique est la réalisation d'un menu avec des sous-menus comme dans l'exemple suivant. Les liens dans les listes sont volontairement absents pour ne pas surcharger le code.

Exemple : masquage / affichage d'éléments
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Familles de véhicules en location</h3> <div> <img src="../exemples/img/x_wing.png"> <ul> <li>A-wing</li> <li>B-wing</li> <li>X-wing</li> </ul> </div> <div> <img src="../exemples/img/naboo_starfighter.png"> <ul> <li>Naboo Starfighter</li> <li>Mandalorian Fighter</li> <li>Jedi Interceptor</li> </ul> </div> </body> </html>
Fichier CSS : styles.css
/* Les listes sont cachées par défaut */ ul { display: none; margin-bottom: 2em; } /* quand la souris survole un div, on affiche la liste qu'il contient */ div:hover ul { display: block; } /* Largeur des div */ div { width: 250px; } /* Pour l'ambiance */ body { background: url(../exemples/img/etoiles.jpg); color: lightyellow; }

### Liste horizontale

Un autre exemple d'utilisation de la propriété display permet d'afficher les lignes d'une liste horizontalement. Il suffit de donner la valeur `inline` à la propriété display des éléments li. Encore une fois cette manipulation est souvent utilisée pour la réalisation de menus.

Exemple : liste horizontale
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Familles de véhicules en location</h3> <div> <img src="../exemples/img/x_wing.png"> <ul> <li>A-wing</li> <li>B-wing</li> <li>X-wing</li> </ul> </div> <div> <img src="../exemples/img/naboo_starfighter.png"> <ul> <li>Naboo</li> <li>Mandalorian</li> <li>Interceptor</li> </ul> </div> </body> </html>
Fichier CSS : styles.css
/* Les lignes des listes sont affichées horizontalement. On ajoute une marge intérieure et une bordure pour les repérer */ li { display: inline; padding: 5px; border: 1px solid; } /* Les lignes survolées changent de couleur */ li:hover { color: red; } /* Les listes sont affichée à côté des images et pas en dessous */ ul { display: inline; padding: 0; } /* Pour l'ambiance */ body { background: url(../exemples/img/etoiles.jpg); color: lightyellow; }

### Mode "bloc en ligne"

La valeur `inline-block` affectée à la propriété display permet d'associer les caractèristiques des affichages bloc et en ligne.

En affichage `inline-block` on pourra :

- afficher les une à côtés des autres des boîtes originellement en bloc,
- spécifier les dimensions (hauteur et largeur) et les marges verticales des boîtes originellement en ligne.

L'exemple suivant affiche les éléments figure en mode `inline-block`. Les boîtes adoptent les caractéristiques suivantes du mode en ligne :

- elles sont placées les unes à côté des autres,
- elles s'alignent sur leur bord inférieur et pas sur leur bord gauche,
- leur largeur est réduite à la largeur minimum pour leur contenu et elles ne prennent plus toute la largeur de leur conteneur.

Exemple : block changé en inline-block
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Véhicules à louer</h3> <figure> <img src="../exemples/img/vulture_droid.png"> <figcaption>1 - Vulture Droid</figcaption> </figure> <figure> <img src="../exemples/img/naboo_starfighter.png"> <figcaption>2 - Naboo Starfighter</figcaption> </figure> <figure> <img src="../exemples/img/v_wing.png"> <figcaption>3 - V-wing</figcaption> </figure> <figure> <img src="../exemples/img/mandalorian_fighter.png"> <figcaption>4 - Mandalorian Fighter</figcaption> </figure> <figure> <img src="../exemples/img/x_wing.png"> <figcaption>5 - X-wing</figcaption> </figure> </body> </html>
Fichier CSS : styles.css
figure { display: inline-block; /* met les figures côte à côte alignées verticalement sur le côté en bas */ margin: 0.2em; /* marge tout autour */ border: 10px solid #fff; /* bord blanc de 10 pixels */ box-shadow: 1px 1px 5px 1px #999; /* ombre légére */ } img { background: #000; padding: 5px; }

### Mode "flexible"

La valeur `flex` affectée à la propriété display permet d'affecter à un conteneur un mode d'affichage sous forme de boîte flexible (flexbox), qui organise tout seul les boîtes qu'elle contient dans une direction, et en proposant une gestion automatique des espacements entre les enfants ou l'étirement automatique de ceux-ci.

Le modèle flexbox

Le contenu (les items) s'organisent suivant un axe principal qui sera défini avec la propriété `flex-direction`. Perpendiculairement à l'axe principal se trouve l'axe transversal, suivant lequel il sera également possible d'aligner les éléments. Cette axe présentera deux extrémités, nommées `flex-start` et `flex-end`.

Les axes pour un alignement horizontal (row | row-reverse)
Positionnement des extrémités sur un axe horizontal

Si on spécifie un axe vertical, les axes sont inversés.

Les axes pour un alignement vertical (column | column-reverse)
Positionnement des extrémités sur un axe vertical

Pour le bloc conteneur, on précisera un `display: flex` qui pourra être complété, entre autres, par des propriétés permettant de spécifier :

- l'axe principal selon lequel les éléments contenus sont affichés, avec la propriété flex-direction ayant pour valeurs : `row` (affichage sur une ligne de gauche à droite - par défaut), `row-reverse` (affichage en ligne de droite à gauche), `column` pour un affichage vertical (de haut en bas), ou `column-reverse` pour un affichage vertical (de bas en haut).
- le retour à la ligne des éléments contenus, avec la propriété flex-wrap ayant pour valeurs `nowrap` (tous les éléments sont sur l'axe principal), `wrap` (pour autoriser le retour à la ligne/colonne), ou `wrap-reverse` pour organiser les éléments sur plusieurs axes.
- la justification du contenu, avec la propriété justify-content ayant pour valeurs : `flex-start` (début du conteneur -- par exemple, gauche pour la direction `row`, droite pour `row-reverse`), `flex-end` (la fin du conteneur), `center` (centrage du contenu), `space-between` (pour répartir le même espace entre les éléments), `space-around` (pour répartir le même espace autour de chaque élément), ou `space-evenly` (pour répartir un espace équitable de part et d'autre des éléments).
- l'alignement du contenu sur l'axe considéré, avec la propriété align-items, ayant pour valeur `flex-start`, `flex-end`, `center`, `stretch` (pour étirer le contenu), ou `baseline` (pour aligner sur la ligne de base -- où le texte de la première ligne du contenu sera écrit).
- en cas où il y a plusieurs lignes, la répartition des lignes dans le conteneur selon l'axe transversal, avec la propriété align-content, ayant pour valeurs : `flex-start`, `flex-end`, `center`, `stretch`, `space-between` ou `space-around`.

Pour les blocs enfants, on pourra spécifier, entre autres, les propriétés suivantes :

- order qui permet de redéfinir l'ordre dans lequel l'élément apparaît dans l'affichage. Cette propriété est un entier.
- align-self qui permet de surcharger la propriété align-items du bloc conteneur.

Exemple : block conteneur en boite flexible
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Véhicules à louer</h3> <div> <figure> <img src="../exemples/img/vulture_droid.png"> <figcaption>1 - Vulture Droid</figcaption> </figure> <figure> <img src="../exemples/img/naboo_starfighter.png"> <figcaption>2 - Naboo Starfighter</figcaption> </figure> <figure> <img src="../exemples/img/v_wing.png"> <figcaption>3 - V-wing</figcaption> </figure> <figure> <img src="../exemples/img/x_wing.png"> <figcaption>4 - X-wing</figcaption> </figure> </div> </body> </html>
Fichier CSS : styles.css
div { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; /* espacement */ align-content: flex-start; align-items: stretch; /* étirement vertical */ height: 200px; /* hauteur de 200px */ } figure { width: 15%; margin: 0.2em; /* marge tout autour */ border: 10px solid #fff; /* bord blanc de 10 pixels */ box-shadow: 1px 1px 5px 1px #999; /* ombre légére */ } img { background: #000; width: calc(100% - 10px); padding: 5px; }

Une description plus complète de ce modèle est disponible sur le site de CSS Tricks.