Direction

Le flux des éléments dans un conteneur peut être modifié

DéfinitionAxe principal du flux

flex-direction

permet de donner le sens de déroulement des éléments dans leur conteneur.

1
<div class="flex">
2
									<div>
3
									Contenu 1
4
									</div>
5
									<div>
6
									Contenu 2
7
									</div>
8
									<div>
9
									Contenu 3
10
									</div>
11
									</div>
1
div.flex {
2
									display: flex;
3
									flex-direction: row; // horizontalement, sens de l'écriture
4
									(valeur par défaut)
5
									}
6


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


row
1
div.flex {
2
									display: flex;
3
									flex-direction: row-reverse; // horizontalement, sens inverse de
4
									l'écriture
5
									}
6


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


row-reverse
1
div.flex {
2
									display: flex;
3
									flex-direction: column; // haut en bas
4
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


column
1
div.flex {
2
									display: flex;
3
									flex-direction: column-reverse; // bas en haut
4
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


column-reverse