MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

place-self

La propriété place-self est une propriété raccourcie qui permet de paramétrer les valeurs des propriétés align-self et  justify-self. La première valeur sera utilisée pour align-self et la seconde pour justify-self. S'il n'y a pas de seconde valeur, la première sera également utilisée pour justify-self.

Syntaxe

/* Valeurs avec un mot-clé */ 
place-self: auto center; 
place-self: normal start; 

/* Alignement géométrique */ 
place-self: center normal; 
place-self: start auto; 
place-self: end normal; 
place-self: self-start auto; 
place-self: self-end normal; 
place-self: flex-start auto; 
place-self: flex-end normal; 
place-self: left auto;
place-self: right normal;

/* Alignement relatif à la ligne de base */ 
place-self: baseline normal; 
place-self: first baseline auto; 
place-self: last baseline normal; 
place-self: stretch auto; 

/* Valeurs globales */ 
place-self: inherit; 
place-self: initial; 
place-self: unset;

Valeurs

auto
La valeur utilise celle de align-items pour l'élément parent.
normal
Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
  • Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme start pour les boîtes des éléments remplacés ou comme stretch pour les autres boîtes positionnées de façon absolue.
  • Pour les éléments positionnés de façon statique au sein d'une disposition absolue, ce mot-clé agira comme stretch
  • Pour les cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
  • Pour les éléments disposés en blocs, cette propriété est ignorée.
  • Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée.
  • Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de stretch, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de start.
self-start
Les éléments sont alignés sur le bord du conteneur vers le début de l'axe en bloc.
self-end
Les éléments sont alignés sur le bord du conteneur vers la fin de l'axe en bloc.
flex-start
Le bord de l'élément flexible au début de l'axe en bloc est aligné avec le début de l'axe en bloc sur la ligne.
flex-end
Le bord de l'élément flexible à la fin de l'axe en bloc est aligné avec la fin de l'axe en bloc sur la ligne.
center
La boîte de marge de l'élément flexible est centrée sur la ligne par rapport à l'axe en bloc. Si la taille de l'élément est supérieure à celle du conteneur flexible, l'élément dépasse également dans chaque direction.
baseline
first baseline

last baseline
Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
Si first baseline n'est pas prise en charge, la valeur correspondra à start, si last baseline n'est pas prise en charge, la valeur correspondra à end.
stretch
Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par max-height/max-width (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.

Spécifications

Spécification État Commentaires
CSS Box Alignment Module
La définition de 'place-self' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple ? ? 45.0 (45.0) ? ? Pas de support
Fonctionnalité Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? ? ? (Oui) ? Pas de support ?

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,