Introduction

FlexBox permet de définir l'agencement d'éléments à l'intérieur de leur conteneur.

Boite

display : flex;
flex-direction :
justify-content :
flex-wrap :
align-content :
align-items :
Boite1
align-self :
flex-basis :
flex-grow :
flex-shrink :
Boite2
align-self :
flex-basis :
flex-grow :
flex-shrink :
Boite3
align-self :
flex-basis :
flex-grow :
flex-shrink :

flexBox
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