display

display: none

La valeur none attribuée à la propriété display permet de ne pas afficher un élément html.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> display:none  </title>
        <style>
            p{margin:1px;}
            p.a{
                background-color: red;
            }
            p.b{
                 background-color: green;
                 display: none;
            }
            p.c{
                 background-color: blue;
            }
            p.d{
                 background-color: brown;
            }
        </style>
    </head>
    <body>
        <p class="a"> bla bla bla </p>
        <p class="b"> blu blu blu </p>
        <p class="c"> bli bli bli </p>
        <p class="d"> bloub bloub bloub </p>
    </body>
</html>

On constate sur l'exemple ci-dessus que le second paragraphe n'apparaît pas (à cause de la règle display : none; faite sur ce paragraphe) : il disparaît du flux. Le troisième paragraphe occupe une place dans la page comme si le second paragraphe n'existait pas.

hidden

hidden n'est pas une valeur de display, c'est une valeur de la propriété visibility.

Nous en parlons dans cette page pour souligner une remarque faite ci-dessus : "le paragraphe disparaît du flux".

Avec la déclaration visibility: hidden, on rend également invisible un élément, mais cette fois on ne le fait pas disparaître du flux : l'élément occupe encore la place qu'il occuperait s'il était visible.

Vous pouvez constater que le paragraphe 2 occupe sa place dans l'exemple ci-dessous bien que son contenu soit invisible.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> display:none  </title>
        <style>
            p{margin:1px;}
            p.a{
                background-color: red;
            }
            p.b{
                 background-color: green;
                  visibility: hidden;
            }
            p.c{
                 background-color: blue;
            }
            p.d{
                 background-color: brown;
            }
             
        </style>
    </head>
    <body>
        <p class="a"> bla bla bla </p>
        <p class="b"> blu blu blu </p>
        <p class="c"> bli bli bli </p>
        <p class="d"> bloub bloub bloub </p>
    </body>
</html>

display: block

La déclaration display: block; sur un élément lui donne un comportement de type block.

L'élément ne s'affiche pas à la suite dans la ligne en cours, il s'affiche en-dessous du bloc en cours. C'est le comportement par défaut des éléments p, h1 à h6, article, section par exemple.
Un élément de type bloc peut contenir, en général, d'autres éléments de type bloc ou des éléments de type inline Exception : un élément p ne contient pas d'autres éléments de type block. Placer un élément h1 dans un élément p sera par exemple détecté comme une erreur sur le w3 validator.
On peut préciser les dimensions d'un élément de type block, ce n'est normalement pas le cas d'un élément inline.
Un élément de type block occupe en largeur tout l'espace possible dans son conteneur, alors qu'un élément en-ligne (type inline) n'occupe que la largeur qui est nécessaire à son contenu.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> display:none  </title>
        <style>
           p:nth-of-type(2)>span{
            display: block;
           }  
           span{
            background-color: red;
            height: 50px;
           }
        </style>
    </head>
    <body>
         <p> Un élément p est par défaut de type block, 
         un élément <span>span</span> est par défaut de type inline. </p>
         
          <p> Un élément p est par défaut de type block, 
          un élément <span>span</span> est par défaut de type inline. </p>
    </body>
</html>

Dans cet exemple, on a forcé le second élément span à devenir de type block (avec la première règle css) : il ne s'affiche plus dans la suite de la ligne mais sous le bloc ligne en cours.

On voit également que l'élément span, normalement de type inline, n'occupe que la largeur nécessaire à l'écriture du mot qu'il contient dans le premier paragraphe alors qu'il occupe toute la largeur de son conteneur lorsqu'il est déclaré de type block.

On voit enfin que le redimensionnement (ici en hauteur, il en serait de même pour la largeur) imposé n'a d'effet que sur l'élément de type block (le premier span semble "insensible" à cette règle contrairement au second, alors que la règle css concerne a priori tous les éléments span).

display: inline

Nous avons déjà parlé des éléments en-ligne dans le paragraphe précédent pour souligner la différence avec les éléments de type block.

Ces deux types d'éléments (inline et block) ne se comprennent correctement qu'en comparant leur comportement.

L'élément inline s'affiche dans la ligne en cours. C'est un "élément naturel" de la phrase. Les éléments de texte, les éléments img, span sont de ce type par défaut dans les navigateurs.
Les éléments de type inline sont contenus dans un élément de type block (ce type block parent peut être l'élément body lui-même).
Un élément inline peut contenir un élément inline (mais ne peut contenir un élément block).
On ne peut redimensionner un élément inline (sauf les images).

display: inline-block

Un élément déclaré display: inline-block a un comportement qui est un mélange des comportements inline et block.

Les éléments inline-block s'affichent les uns à côté des autres (tant que la largeur du conteneur le permet) comme le font les éléments inline.
Les éléments inline-block peuvent être redimensionnés (avec les propriétés width et height), comme les éléments block.

Affichage de paragraphes (élément de type block par défaut dans les navigateurs : )

<!DOCTYPE html>
<html lang="fr">
	
	
<head>
	<meta charset="utf-8">
	<title> display:none  </title>
	<style>
		p{margin:1px;}
		p.a{
			background-color: red;
		}
		p.b{
			 background-color: green;
			  
		}
		p.c{
			 background-color: blue;
		}
		p.d{
			 background-color: brown;
		}
		 
	</style>
</head>
    
    
<body>
	<p class="a"> bla bla bla </p>
	<p class="b"> blu blu blu </p>
	<p class="c"> bli bli bli </p>
	<p class="d"> bloub bloub bloub </p>
</body>

    
</html>

Donnons maintenant le type inline-block aux paragraphes :

<!DOCTYPE html>
<html lang="fr">
	
	
<head>
	<meta charset="utf-8">
	<title> display:none  </title>
	<style>
		p{  
			display: inline-block;
			margin:1px; 
		}
		p.a{
			background-color: red;
		}
		p.b{
			 background-color: green;
			  
		}
		p.c{
			 background-color: blue;
		}
		p.d{
			 background-color: brown;
		}
	</style>
</head>


<body>
	<p class="a"> bla bla bla </p>
	<p class="b"> blu blu blu </p>
	<p class="c"> bli bli bli </p>
	<p class="d"> bloub bloub bloub </p>
</body>
    
    
</html>

Le comportement semble être celui d'éléments inline. Toutefois, on peut agir sur les dimensions (ce ne serait pas possible avec le type inline) :

<!DOCTYPE html>
<html lang="fr">
	
	
<head>
	<meta charset="utf-8">
	<title> display:none  </title>
	<style>
		p{ 
			display: inline-block;
			margin:1px; 
		}
		p.a{
			background-color: red;
			width: 150px;
		}
		p.b{
			 background-color: green;
			 height: 50px;
			  
		}
		p.c{
			 background-color: blue;
		}
		p.d{
			 background-color: brown;
		}
	</style>
</head>


<body>
	<p class="a"> bla bla bla </p>
	<p class="b"> blu blu blu </p>
	<p class="c"> bli bli bli </p>
	<p class="d"> bloub bloub bloub </p>
</body>
    
    
</html>

display: flex

Exemples

La déclaration display: flex; est un peu différente des précédentes. Elle agit sur les enfants de l'élement plutôt que sur l'élément lui-même.

Dans l'exemple ci-dessous, observez bien les règles CSS déclarées pour chaque élément div et l'affichage obtenu.

<!DOCTYPE html>
<html lang="fr">
	
	

<head>
	<meta charset="utf-8">
	<title> border  </title>
	<style>
		
		div:first-of-type{ /*style pour le  div 1 */
				display: flex;
				flex-direction: row;
			}
			
		div:nth-of-type(2){/* style pour le  div 2*/
				display: flex;
				flex-direction: column;
			}
			
		div:nth-of-type(3){/* style pour le  div 3 */
				display: flex;
				flex-direction: column-reverse;
			}
			
		div:nth-of-type(4){/* style pour le  div 4*/
				display: flex;
				flex-direction: row-reverse;
			}
			
		div:nth-of-type(5){/* style pour le  div 5 */
				display: flex;
				flex-direction: row-reverse;
				justify-content: flex-end;
			}
			
		p{ 
			border: 2px solid green; /* on encadre les paragraphes */
			margin : 3px; /* marges externes de 3px */
		 }
		 
		 hr{ /* style pour le trait séparant les div */
			 margin:20px;
			 border-color:red;
			 border-width:5px;
		 }
	</style>
</head>


<body>
	<div>
		<p> un </p>
		<p> deux </p>
		<p> trois </p>
		<p> quatre </p>
	</div>
	
	 <hr>
	
	<div>
		<p> un </p>
		<p> deux </p>
		<p> trois </p>
		<p> quatre </p>
	</div>
	
	 <hr>
	
	<div>
		<p> un </p>
		<p> deux </p>
		<p> trois </p>
		<p> quatre </p>
	</div>
	
	 <hr>
	
	<div>
		<p> un </p>
		<p> deux </p>
		<p> trois </p>
		<p> quatre </p>
	</div>
	
	   <hr>
	
	<div>
		<p> un </p>
		<p> deux </p>
		<p> trois </p>
		<p> quatre </p>
	</div>
</body>


    
</html>

Illustration

fils 1

fils 2

fils 3

fils 4

fils 5

fils 6

fils 7

fils 8

fils 9

fils 10

fils 11

fils 12

Code css :

D'autres propriétés sont applicables pour ajuster l'affichage avec flex.