Alignement

DéfinitionAxe principal du flux

justify-content permet de modifier l'alignement des éléments par rapport à l'axe principal.

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
									justify-content: center; // groupés au centre
4
									}
5


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


alignement
1
div.flex {
2
									display: flex;
3
									justify-content: flex-end; // groupés à la fin (flex-start : au
4
									debut)
5
									}
6


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


alignement
1
div.flex {
2
									display: flex;
3
									justify-content: space-between; // répartis, touches les bords
4
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


alignement
1
div.flex {
2
									display: flex;
3
									justify-content: space-around; // répartis, moitié d'espace sur
4
									les bords
5
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


alignement
1
div.flex {
2
									display: flex;
3
									justify-content: space-evenly; // répartis, tous les espaces
4
									égaux
5
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


alignement
DéfinitionPassage à la ligne
flex-wrap permet d'indiquer si les éléments passent à la ligne quand il n'y a plus de place.
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
									width: 400px;
4
									height: 150px;
5
									}
6
									.flex div{
7
									min-width: 150px;
8
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


alignement
1
div.flex {
2
									display: flex;
3
									width: 400px;
4
									height: 150px;
5
									flex-wrap: wrap;
6
									}
7
									.flex div{
8
									min-width: 150px;
9
									}
10


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


alignement
DéfinitionLigne ou colonne sur l'axe secondaire
align-content permet de modifier l'alignement des lignes (ou colonnes) sur l'axe secondaire.
à condition d'avoir plus d'une ligne (ou colonne) de contenu.
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
									width: 400px;
4
									height: 150px;
5
									flex-wrap: wrap;
6
									align-content: center;
7
									}
8
									.flex div{
9
									min-width: 150px;
10
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


alignement
Autres possibilités : flex-start, flex-end, space-between, space-around, space-evenly...
voir justify-content
DéfinitionÉléments sur l'axe secondaire
align-items permet de modifier l'alignement des éléments dans une ligne (ou colonne) sur l'axe secondaire.
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>
12
									Contenu 4
13
									</div>
14
									<div>
15
									Contenu 5
16
									</div>
17
									<div>
18
									Contenu 6
19
									</div>
20
									</div>
1
div.flex {
2
									display: flex;
3
									width: 400px;
4
									height: 150px;
5
									flex-wrap: wrap;
6
									align-items: center;
7
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 
 Contenu 4 
 
 Contenu 5 
 
 Contenu 6 
 


alignement
Autres possibilités : flex-start, flex-end
align-self : permet de modifier un élément particulier dans la ligne (ou colonne)
1
div.flex {
2
									display: flex;
3
									width: 400px;
4
									height: 150px;
5
									flex-wrap: wrap;
6
									align-items: center;
7
									}
8
									div.flex > div:first-child {
9
									align-self: flex-start;
10
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 
 Contenu 4 
 
 Contenu 5 
 
 Contenu 6 
 


alignement
Autres possibilités : center, flex-end
DéfinitionCas particulier d'une seule ligne (ou colonne)
Pour gérer l'alignement d'une ligne (ou colonne), il faut utiliser justify-content et align-items
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
									width: 400px;
4
									height: 150px;
5
									justify-content: center;
6
									align-items: center;
7
									}
8
									.flex div{
9
									min-width: 150px;
10
									}


 
 Contenu 1 
 
 Contenu 2 
 
 Contenu 3 
 


alignement
1
.flex div{
2
									...
3
									justify-content: flex-start; // en haut
4
									align-items: flex-end; // à droite
5
									}
6
									.flex div{
7
									...
8
									justify-content: flex-end; // en bas
9
									align-items: flex-start; // à gauche
10
									}
11
									...