Propriété justify-items CSS

Définition et utilisation

L'attribut justify-items est défini sur le conteneur de grille pour aligner les éléments enfants (éléments de grille) dans la direction d'alignement en ligne.

Pour les pages en anglais, la direction d'alignement en ligne est de gauche à droite et la direction de bloc est vers le bas.

Pour que cet attribut ait un effet d'alignement, les éléments de grille doivent laisser de la place disponible autour d'eux dans la direction d'alignement en ligne.

Astuce :Pour aligner les éléments de grille dans la direction de bloc plutôt que dans la direction d'alignement en ligne, utilisez Attribut align-items Attributs.

Voir également :

Tutoriel CSS :CSS Grid

Tutoriel CSS :Positionnement CSS

Manuel de référence CSS :Attribut align-items

Manuel de référence CSS :Attribut direction

Manuel de référence CSS :Attribut grid

Manuel de référence CSS :Attribut grid-template-columns

Manuel de référence CSS :Attribut justify-self

Manuel de référence CSS :Attribut position

Manuel de référence CSS :Attribut writing-mode

Instance

Exemple 1

Aligner chaque élément de grille à la fin de sa cellule en direction d'alignement en ligne :

#container {
  display: grid;
  justify-items: end;
}

Essayer par vous-même

Exemple 2 : Comparaison de justify-items et justify-self

Définir l'alignement par rapport au conteneur en 'centré' et l'alignement de l'élément en ligne en 'droite alignée'. La valeur 'right' l'emporte :

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Essayer par vous-même

Exemple 3 : Définir justify-items sur un élément de grille positionné absolument

Définir l'alignement des éléments en ligne des éléments de grille positionnés absolument en 'droite alignée' :

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Essayer par vous-même

Exemple 4 : writing-mode

Lorsque la valeur de l'attribut writing-mode de l'élément conteneur de grille est définie sur vertical-rl, la direction d'alignement des éléments en ligne est vers le bas. Le résultat est que le point de départ du conteneur se déplace de la gauche vers le haut et que la fin du conteneur se déplace de la droite vers le bas :

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Essayer par vous-même

Exemple 5 : direction

Lorsque la valeur de l'attribut 'direction' de l'élément conteneur de grille est 'rtl', la direction en ligne est de droite à gauche. Le résultat est que le point de départ du conteneur est déplacé de la gauche vers la droite, et la extrémité du conteneur est déplacée de la droite vers la gauche :

#container {
  justify-items: start;
  direction: rtl;
}

Essayer par vous-même

Syntaxe CSS

justify-items: legacy|normal|stretch|Alignement positionnel|overflow-alignment|Alignement de la ligne de base|initial|inherit;

Valeur de l'attribut

Valeur Description
legacy

Valeur par défaut.

Uniquement lorsque le 'justify-self' des éléments de grille est 'auto' et commence par 'legacy', les éléments de grille héritent de la valeur de la propriété 'justify-items' du conteneur de grille.

Son existence vise à réaliser le comportement d'alignement hérité des éléments <center> d'HTML et des attributs align.
normal Dépendant du contexte de mise en page, mais similaire à 'stretch' de la mise en page en grille.
stretch S'étend pour remplir la cellule de grille si inline-size (largeur) n'est pas définie.
start Aligne les éléments au début de la direction en ligne.
left Aligne les éléments à gauche.
center Aligne les éléments au centre.
end Aligne les éléments à la fin de la direction en ligne.
right Aligne les éléments à droite.
overflow-alignment
  • 'safe' met en œuvre l'alignement des éléments en fonction de 'start' si le contenu déborde.
  • 'unsafe' conserve la valeur d'alignement, quels que soient les contenus des éléments en cas de débordement.
baseline-alignment Aligne l'élément avec la ligne de base de l'élément parent.
initial Définit cette propriété à sa valeur par défaut. Voir : initial.
inherit Inherits cette propriété de l'élément parent. Voir : inherit.

Détails techniques

Valeur par défaut : legacy
Héritage : Non
Création d'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.justifyItems="center"

Support du navigateur

Les nombres dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0