justify-self : l'alignement des éléments individuels dans un conteneur Flex ou grid

Aligner les individuels dans un conteneur avec la propriété css justify-self

La propriété CSS `justify-self` permet de définir l'alignement horizontal d'un élément individuel dans un conteneur Flex. Elle peut prendre les valeurs suivantes :

• La valeur par défaut de la propriété justify-self est définie sur auto : C'est la valeur utilisée par la propriété justify-self de l'élément parent.
• baseline : Fait en sorte que la ligne de base d'alignement du premier ou du dernier ensemble de lignes de base de l'élément actuel s'aligne sur la ligne de base correspondante dans le premier ou le dernier ensemble de lignes de base partagé de tous les éléments de son groupe de partage de lignes de base. La valeur par défaut pour la première ligne de base est start et pour la dernière ligne de base est end.
• start : Permet au contenu de s'aligner sur la gauche de la cellule.
• end : Permet au contenu de s'aligner sur la droite de la cellule.
• center : Permet d'aligner le contenu au centre de la cellule.
• flex-start : Il s'agit de la même valeur que celle du début.
• flex-end : Identique à la valeur de fin.
• self-start : Aligne l'élément à gauche du conteneur aligné au début d'un élément.
• self-end : Aligne l'élément à droite du conteneur aligné à la fin d'un élément.
• Left : Aligne l'élément à gauche du conteneur aligné. C'est la même chose que start si l'axe de la propriété n'est pas parallèle à l'axe de la ligne.
• right : Fait affleurer le paquet d'éléments à la droite du conteneur d'alignement. Il agit de la même manière que end si l'axe de propriété n'est pas parallèle à l'axe inline.
• safe : Aligne l'élément comme valeur de départ si l'élément dépasse le conteneur d'alignement.
• unsafe : Il fait en sorte que l'élément s'aligne comme la valeur donnée, quelles que soient les tailles relatives du conteneur d'alignement et de l'élément.e conteneur de grille pour donner aux éléments enfants (éléments de grille) un alignement dans la direction inline.

La syntaxe générale pour utiliser la propriété `justify-self` est la suivante :

	justify-self: stretch | normal | auto | baseline | start | end | center | flex-start | flex-end | self-start | self-end | left | right | safe | unsafe;

Voici quelques exemples d'utilisation de la propriété `justify-self` :

     Copier le code

/* Alignement à gauche */
.item {
    justify-self: start;
}

/* Alignement à droite */
.item {
    justify-self: end;
}

/* Alignement au centre */
.item {
    justify-self: center;
}

/* Alignement sur la ligne de base */
.item {
    justify-self: baseline;
}

/* Étirement de l'élément pour remplir tout l'espace disponible */
.item {
    justify-self: stretch;
}

Il est important de noter que cette propriété s'applique uniquement aux éléments enfants d'un conteneur en flex ou grid (avec la propriété `display: flex(ou grid)`).

Prise en charge de la propriété dans les navigateurs

Explorateur
Verssion	57	16	45	10.1	44