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 (valeur par défaut)
4
}
5



    

        Contenu 1
    

    

        Contenu 2
    

    

        Contenu 3
    




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



    

        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