Propriété CSSGrid

justify-self

Aligne un seul élément dans sa cellule de grille le long de l’axe horizontal.

Valeur initiale: auto
Héritée: Non
Animable: non
S’applique à: éléments grid et éléments en position absolue
JavaScript: element.style.justifySelf = "end"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.form {
  display: grid;
  gap: 10px;
}

.form button {
  justify-self: end;
}

Aperçu

Définition et utilisation

Vous réglez la propriété justify-self sur un élément de la grille pour remplacer justify-items du conteneur. L’élément peut s’étirer sur toute la cellule, ou se placer à son bord gauche, droit, ou au centre.

C’est utile quand un élément d’une rangée a un alignement différent, par exemple un bouton poussé à droite dans un formulaire basé sur une grille.

Dans les éléments flex, cette propriété est ignorée. Dans un bloc en position absolue, elle influence sa place dans le bloc englobant.

Syntaxe

justify-self: auto | normal | stretch | start | end | center;

Valeurs

auto
L’élément suit justify-items du conteneur, et s’étire par défaut.
start
L’élément 2 se colle au bord gauche de sa cellule.
center
L’élément 2 se place au centre de la cellule.
end
L’élément 2 se colle au bord droit de la cellule.

Valeur	Description
auto	L’élément suit `justify-items` du conteneur, et s’étire par défaut.
start	L’élément 2 se colle au bord gauche de sa cellule.
center	L’élément 2 se place au centre de la cellule.
end	L’élément 2 se colle au bord droit de la cellule.

Valeurs en pratique

auto

L’élément suit justify-items du conteneur, et s’étire par défaut.

.target { justify-self: auto; }

start

L’élément 2 se colle au bord gauche de sa cellule.

.target { justify-self: start; }

center

L’élément 2 se place au centre de la cellule.

.target { justify-self: center; }

end

L’élément 2 se colle au bord droit de la cellule.

.target { justify-self: end; }

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

En Flexbox, remplacez justify-self par une marge auto, par exemple margin-left: auto.
Le raccourci place-self règle en une fois l’alignement vertical et horizontal.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours