justify-items CSS propriété

Définition de la CSS justify-items.

La propriété d'Alignement CSS justify-items permet de spécifier globalement l'alignement "horizontal" des éléments enfants et les boîtes anonymes par rapport à la taille de leur conteneur et dans l'axe correspondant au sens d'écriture (axe principal).

Dans un conteneur Flexbox Css, l'alignement se fait par rapport à l'axe principal.
Dans un conteneur Grid Css, l'alignement se fait horizontal par rapport à la largeur de la colonne.

Pour redéfinir l'alignement d'un seul élément Css par rapport aux autres, utilisez la propriété Css justify-self.

justify-items : normal;
justify-items : flex-start;
justify-items : legacy flex-end; 
justify-items : center;
justify-items : baseline;
justify-items : stretch;

La propriété de feuille de style justify-items CSS peut prendre la valeur de :

• start : les éléments (margin incluses) sont alignés au début du conteneur d'alignement sur l'axe en ligne.
• center : les éléments (margin incluses) sont alignés au centre du conteneur d'alignement sur l'axe en ligne.
• end : les éléments (margin incluses) sont alignés à la fin de leur conteneur d'alignement sur l'axe en ligne.
• stretch : les éléments (margin incluses) sont étirés afin que sa taille prenne toute la taille du conteneur d'alignement sur l'axe en ligne. Respecte les contraintes imposées par min-height, max-height et min-width, max-width.
• self-start : les éléments (margin incluses) sont alignés au début du mode d'écriture de la boîte sur l'axe en ligne. Dépend de direction et writing-mode.
• self-center : les éléments (margin incluses) sont alignés au centre du mode d'écriture de la boîte sur l'axe en ligne. Dépend de direction et writing-mode.
• self-end : les éléments (margin incluses) sont alignés à la fin du mode d'écriture de la boîte sur l'axe en ligne. Dépend de direction et writing-mode.
• flex-start : le "coin de début" (margin incluses) de chaque élément flexible est collé sur le "début transversal de la ligne* de flexibles". Si ce n'est pas un conteneur flexible, cette valeur correspond à start.
• flex-end : le "coin de fin" (margin incluses) chaque élément flexible est collé sur la "fin transversal" de la ligne. Si ce n'est pas un conteneur flexible, cette valeur correspond à end.
• right : les éléments (margin incluses) sont alignés à la fin du conteneur d'alignement sur l'axe en ligne. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme end.
• left : les éléments (margin incluses) sont alignés au début du conteneur d'alignement sur l'axe en ligne. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start.
• baseline : correspond à first baseline.
• first baseline : .
• last baseline : .
• normal : les éléments (margin incluses) auront un comportement proche de stretch, sauf pour les boîtes qui ont des dimensions intrinsèques qui auront un comportement start.

La propriété de feuille de style justify-items CSS peut prendre la valeur d'héritage :

• - legacy : spécifie que les éléments enfants héritent de la valeur, si sa propriété justify-self est égale à auto.
  Ne peut être suivit uniquement de la valeur left, right, ou center. La valeur seule est la valeur par défaut et équivaut à normal.

• safe : si la taille du contenu texte est trop grande, l'élément est aligné comme si la valeur start avait été utilisée.
• unsafe : si la taille du contenu texte est trop grande, l'élément est aligné comme la valeur précisée.

Exemple de code justify-items CSS

Conditions d'application de la CSS justify-items.

La propriété de feuille de style justify-items CSS est applicable sur l'ensemble des balises HTML ou XHTML.

Héritage des valeurs Css de justify-items.

Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style justify-items.

Problème d'interprétation de justify-items en Css.

La propriété CSS justify-items ne fonctionne pour le moment que sur conteneur Grid de type display:[inline-]grid (03/2020).