Le flexbox ou modèle des boites flexibles est un des modèles de disposition CSS les plus puissants que l’on va pouvoir manipuler.
Ce modèle se compose d’un conteneur flexible et d’éléments flexibles dont la principale caractéristique va d’être… flexibles, c’est-à-dire de posséder une taille qui va s’adapter en fonction de l’espace disponible.
Le display flex au conteneur définit un contenu flexible à tous les enfants directs du container, ils deviennent donc immédiatement des éléments flexibles auxquels on va pouvoir appliquer les propriétés du flexbox.
Ces boites enfants s'étendent afin d'occuper tout l'espace disponible du container.
Remarque :
Notez que display : flex va créer un conteneur flexible de niveau bloc tandis que display : inline-flex va créer un conteneur flexible de niveau inline.
Un conteneur avec display : flex occupera donc tout l’espace disponible dans son parent et se placera sur sa propre ligne tandis qu’un conteneur avec display : inline-flex n’occupera que l’espace nécessaire à son contenu dans son parent et pourra se placer à côté d’autres éléments.