Elle consiste à définir un conteneur (parent) qui contient un ou plusieurs éléments (enfants) et à utiliser des propriétés flexibles pour contrôler la disposition des éléments à l’intérieur du conteneur.

Avantages de Flexbox :

– facile à utiliser,

– permet de gérer facilement l’alignement, la taille et la disposition des éléments,

– compatible avec les anciens navigateurs

– permet de créer des designs responsives.

Utiliser les propriétés flexibles pour manipuler la disposition des éléments à l’intérieur du conteneur.

Les propriétés flexibles les plus courantes sont :

1 – display: flex; (pour définir le conteneur comme un élément flexible)

2 – flex-direction: row/column; (pour définir l’axe principal, raw est l’option par défaut)

3 – justify-content: center/flex-start/flex-end/space-between/space-around; (pour aligner les éléments sur l’axe principal)

4 – align-items: center/flex-start/flex-end/baseline/stretch; (pour aligner les éléments sur l’axe secondaire)

5 – flex-wrap: wrap/nowrap; (pour définir si les éléments doivent être enroulés ou non)