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 debut)
4
}
5



    

        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 les bords
4
}



    

        Contenu 1
    

    

        Contenu 2
    

    

        Contenu 3
    




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



    

        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
...