La propriété css justify-content spécifie l'alignement entre les éléments à l'intérieur d'un conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible.
Définition et utilisation de la propriété css justify-content
La propriété justify-content aligne les éléments du conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible sur l'axe principal (horizontalement).
Astuce : utilisez la propriété align-items pour aligner les éléments verticalement.
Syntaxe CSS
Par défaut. Les éléments sont étirés pour s'adapter au conteneur
center
Les éléments sont positionnés au centre du conteneur
flex-start
Les éléments sont positionnés au début du conteneur
flex-end
Les éléments sont positionnés à la fin du conteneur
baseline
Les éléments sont positionnés à la ligne de base du conteneur.
initial
Définit cette propriété à sa valeur par défaut.
inherit
Hérite de cette propriété de son élément parent. Lire à propos de inherit
Il existe plusieurs options d'alignement disponibles, chacune ayant une utilisation spécifique.
L'option "flex-start" aligne les éléments à gauche du conteneur. Cette option est utile lorsque vous voulez que les éléments soient alignés à gauche par défaut, mais que vous voulez également donner la possibilité de les aligner à droite.
L'option "center" aligne les éléments au centre du conteneur. Cette option est utile lorsque vous voulez que les éléments soient centralisés par défaut, mais que vous voulez également donner la possibilité de les aligner à gauche ou à droite.
L'option "flex-end" aligne les éléments à droite du conteneur. Cette option est utile lorsque vous voulez que les éléments soient alignés à droite par défaut, mais que vous voulez également donner la possibilité de les aligner à gauche.
L'option "space-between" distribue les éléments également entre les bords gauche et droit du conteneur. Cette option est utile lorsque vous voulez que les éléments soient espacés de manière égale, mais que vous voulez également donner la possibilité de les aligner à gauche, au centre ou à droite.
L'option "space-around" distribue les éléments également autour du conteneur. Cette option est utile lorsque vous voulez que les éléments soient espacés de manière égale, mais que vous voulez également donner la possibilité de les aligner à gauche, au centre ou à droite.
En résumé, la propriété CSS justify-content vous permet de définir l'alignement horizontal de vos éléments dans un conteneur. Il existe plusieurs options d'alignement disponibles, chacune ayant une utilisation spécifique. Il est important de choisir l'option qui convient le mieux à votre projet pour obtenir le résultat souhaité.