Flexbox

Flexbox est une technique de mise en page en CSS qui permet de créer des mises en page flexibles et réactives. L'idée principale derrière Flexbox est de créer un conteneur (parent) qui organise ses enfants (éléments à l'intérieur) en lignes ou en colonnes, en ajustant automatiquement leur taille pour occuper l'espace disponible de manière équilibrée.

Conteneur Flex (Parent)

Imaginez le conteneur flex comme un plateau sur lequel vous placez des objets. C'est le parent qui contrôle la manière dont les éléments à l'intérieur sont disposés. Pour activer la fonctionnalité flexbox sur un conteneur, il faudra lui attribuer la propriété : display: flex;. En appliquant cette option cela indique aux enfants qu'ils doivent suivre les règles de flexbox.

Les axes

Flexbox fonctionne avec deux axes : l'axe principal (main axis) et l'axe transversal (cross axis).

L'axe principal peut être horizontal (de gauche à droite) ou vertical (de haut en bas), tandis que l'axe transversal est perpendiculaire à l'axe principal. Voici un exemple si l'axe principale est horizontal :

Aligner les Éléments

En utilisant des propriétés telles que justify-content pour l'axe principal et align-items pour l'axe transversal, vous pouvez contrôler la façon dont les éléments sont répartis dans le conteneur. Vous pouvez tester les différentes valeurs de ces propriétés ici : Guide interactif flexbox

Espacement Entre les Éléments

La propriété gap peut être utilisée pour régler l'espace entre les éléments.