CSS Flexbox

Flexbox CSS3 a été conçu pour étendre le modèle de boîte classique en CSS et ses dispositions de type "block" ou "inline" en introduisant un nouveau modèle de boîte distinct, appelé "Modèle de boîte flexible"

 

Principe de base : conteneur + éléments

Par défaut, les balises DIV se suivent les unes à la suite des autres (balise de type "block")

<!DOCTYPE html>
<html>

<head>
	<style>
		#conteneur { border:thin solid #000 ; }
		.element { width : 200px ; height: 50px ; margin:10px; border:medium solid #000 ; padding:5px; }
		.element:nth-child(1) { background-color:#00F ; }
		.element:nth-child(2) { background-color:#FFF ; }
		.element:nth-child(3) { background-color:#F00 ; }
	</style>
</head>

<body>
	<div id="conteneur">
		<div class="element">El&eacute;ment 1</div>
		<div class="element">El&eacute;ment 2</div>
		<div class="element">El&eacute;ment 3</div>
	</div>
</body>
</html>				 

 

Elément 1
Elément 2
Elément 3

 

Ajout d'une seule propriété "flex"

#conteneur { 
	display: flex ;
}

 

Elément 1
Elément 2
Elément 3

 

La direction

Flexbox permet de positionner les éléments dans le sens que l'on veut (horizontalement, verticalement ou les inverser). La propriété flex-direction peut prendre les valeurs suivantes :

#conteneur { 
	display: flex ;
	flex-direction : column-reserve ;
}

 

Elément 1
Elément 2
Elément 3

 

#conteneur { 
	display: flex ;
	flex-direction : row-reserve ;
}

 

Elément 1
Elément 2
Elément 3

 

L'alignement

Les blocs sont disposés soit horizontalement (par défaut), soit verticalement : C'est l'axe principal.
Il y a aussi un axe secondaire : si les blocs sont organisés horizontalement, l'axe secondaire est l'axe vertical et inversement.

Pour changer l'alignement, on utilise "justify-content" avec les valeurs possibles :

 

#conteneur { 
	display: flex ;
	justify-content: space-around;
}

 

Elément 1
Elément 2
Elément 3

 

 

#conteneur { 
	display: flex ;
	justify-content: space-between;
}

 

Elément 1
Elément 2
Elément 3

 

 

#conteneur { 
	display: flex ;
	justify-content: flex-end;
}

 

Elément 1
Elément 2
Elément 3

 

 

#conteneur { 
	display: flex ;
	justify-content: center;
}

 

Elément 1
Elément 2
Elément 3

 

Pour en savoir plus :