Propriété CSS place-self

Page précédente place-items
Page suivante pointer-events

Définition et utilisation

place-self Cet attribut est utilisé pour aligner un élément de grille et est une abréviation des attributs suivants :

align-self
justify-self

Si l'attribut place-self possède deux valeurs :

place-self: start center;

La valeur de l'attribut align-self est 'start'
La valeur de l'attribut justify-self est 'center'

Si l'attribut place-self ne possède qu'une seule valeur :

place-self: end;

Les valeurs des attributs align-self et justify-self sont toutes deux 'end'

Exemple

Exemple 1

Aligner un seul élément de grille à la position de fin dans les deux directions de bloc et de ligne intérieure :

#myDiv {
  place-self: end;
}

Essayez-le vous-même

Exemple 2 : Mode d'écriture

Lorsque l'élément <div> writing-mode Lorsque la valeur de l'attribut est 'vertical-rl', la position de fin de la cellule de grille dans la direction de bloc est déplacée du bas vers la gauche, et la position de fin dans la direction de ligne intérieure est déplacée de la droite vers le bas :

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

Essayez-le vous-même

Exemple 3 : layout en boîte flexible

place-self L'attribut peut également être utilisé pour les éléments de layout en boîte flexible, mais justify-self La deuxième valeur sera ignorée, car elle n'est pas applicable au layout en boîte flexible :

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

Essayez-le vous-même

Syntaxe CSS

place-self: auto|value|initial|inherit;

Valeur de l'attribut

Valeur	Description
auto	Par défaut. La valeur par défaut de place-self de l'élément.
normal	Dépend du contexte de mise en page, mais pour les éléments de grille non définis en taille, le comportement est similaire à 'stretch' dans le layout en grille. Le comportement de la valeur de l'attribut est similaire à 'start' si une taille est définie.
stretch	S'étire pour remplir la cellule de grille si la taille n'est pas définie.
start	Aligne l'élément au début dans les directions en ligne et en bloc.
left	Aligne l'élément à gauche dans la direction en ligne, en tant que valeur de la propriété justify-self.
center	Aligne l'élément au centre.
end	Aligne l'élément à la position de fin dans les directions en ligne et en bloc.
right	Aligne l'élément à droite dans la direction en ligne, en tant que valeur de la propriété justify-self.
overflow-alignment	'safe' : si le contenu déborde, l'alignement du projet est mis à 'start' 'unsafe' : conserve la valeur d'alignement indépendamment du débordement du contenu
Alignement de la ligne de base	Aligne l'élément avec la ligne de base de son parent.
initial	Récupère cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Création d'animation :	Non pris en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.placeSelf="end stretch"