Introduction

FlexBox permet de définir l'agencement d'éléments à l'intérieur de 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>
12
<div class="flex">
13
    <div>
14
        Contenu 4
15
    </div>
16
    <div>
17
        Contenu 5
18
    </div>
19
    <div>
20
        Contenu 6
21
    </div>
22
</div>

Le conteneur doit avoir sa propriété display à flex ou à inline-flex

flex : Le conteneur agit comme block

1
div.flex {
2
  display: flex;
3
}
4



    

        Contenu 1
    

    

        Contenu 2
    

    

        Contenu 3
    





    

        Contenu 4
    

    

        Contenu 5
    

    

        Contenu 6
    




row
inline-flex : Le conteneur agit comme inline-block
1
div.flex {
2
  display: inline-flex;
3
}
4



    

        Contenu 1
    

    

        Contenu 2
    

    

        Contenu 3
    





    

        Contenu 4
    

    

        Contenu 5
    

    

        Contenu 6
    




row