* {
	box-sizing: border-box;
	padding:0;margin:0;}

body {
	padding: 1em;
	background:rgba(0,0,0,.1);
	color: #333;
	font-size: 1.2em;
	font-family: georgia, "trebuchet ms", arial, serif;
}

section {
	max-width: 90vw;
	margin: auto;
	padding: 2rem 0;
}

ul#galerie li{
	list-style-type:none;
}

ul#galerie li img{
    margin:5px;
    border: 3px solid #000;
    box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3); 
	/* En cas d'espace blanc en dessous ou autour des images */
	vertical-align:bottom;
}

ul#galerie
{
	/* 1. QUELLE DISTRIBUTION ? */
	
 	/* Distribution horizontale : */
	
/* 	display: flex;
    flex-wrap: wrap;
    flex-direction: row;  */	

 	/* Distribution verticale : */
 	 display: flex;
/* 	 affichage flexible. Nous ne précisons pas la direction, car elle est par défaut horizontale, en ligne */
	 
    flex-wrap: wrap;
/* 	spécifie que les éléments enfants, donc les images, peuvent aller à la ligne suivante.
 */ 
    
	justify-content: space-around;  
/* 	permet d’indiquer que pour l’alignement sur l’axe principal horizontal, nous souhaitons qu’il y ait un espace identique entre chaque enfant, en fonction de la place disponible dans la largeur de l’élément parent. */

    align-items: flex-start;  
	/* précise que les éléments enfants sont placés au début de l’axe secondaire vertical dans cet exemple. */
	
    align-content: space-around;  
/* spécifie que sur l’axe secondaire, l’espacement entre les éléments enfants est identique. */	

}

