La propriété display

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)

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.

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.

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

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 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)

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

Les axes pour un alignement vertical (column | column-reverse)

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

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