propriété justify-self de CSS

Définition et utilisation

L'attribut justify-self aligne les éléments de grille à l'intérieur de la cellule de grille suivant la direction d'alignement des lignes.

Pour les pages en anglais, la direction d'alignement des lignes 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 des lignes.

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

Veuillez également consulter :

Tutoriel CSS :CSS Grid

Tutoriel CSS :Positionnement CSS

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

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

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

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 position

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

Veuillez également consulter :

Exemple

Exemple 1

Aligner l'élément de grille à droite dans sa cellule de grille :

.red {
  display: grid;
  justify-self: right;
}

Essayez-le vous-même

Exemple 2 : justify-self vs justify-items

Définir la méthode d'alignement par rapport au conteneur sur 'centré', et l'élément de grille lui-même sur 'aligné à droite'. La valeur 'right' l'emporte :

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

Essayez-le vous-même

Exemple 3 : Définir justify-self sur un élément de grille positionné de manière absolue

Définir la méthode d'alignement de l'élément de grille positionné de manière absolue sur 'right' :

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

Essayez-le 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 lignes est vers le bas. Le résultat est que le point de départ du conteneur se déplace vers le haut à partir de la gauche et la fin du conteneur se déplace vers le bas à partir de la droite :

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Essayez-le vous-même

Exemple 5 : direction

Lorsque l'attribut direction de l'élément conteneur de grille est défini sur '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 fin du conteneur est déplacée de la droite vers la gauche :

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. Hérite de la valeur de l'attribut justify-self du conteneur de grille.
normal

Dépendant du contexte de mise en page, mais similaire à 'stretch' de l'élément de grille sans size défini dans le layout de grille.

Si size est défini, le comportement de la valeur de l'attribut est similaire à 'start'.
stretch S'étire 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 le projet en alignement 'start' si le contenu en surpasse.
  • 'unsafe' conserve la valeur d'alignement, quels que soient les contenus du projet.
Alignement de la ligne de base Aligne l'élément avec la ligne de base de son élément parent.
initial Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit Inherits cette propriété de son élément parent. Voir : inherit.

Détails techniques

Valeur par défaut : auto
Héritage : Non
Création d'animation : Non pris en charge. Voir :Attributs liés aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.justifySelf="right"

Prise en charge 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