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.

Syntaxe formelle

La syntaxe n'a pas été trouvée !

Spécifications

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

Valeur introuvable dans la base de données

Compatibilité des navigateurs

Prise en charge pour les dispositions flexibles

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 59Edge ? Firefox Support complet 45IE ? Opera ? Safari Aucun support NonWebView Android Support complet 59Chrome Android Support complet 59Edge Mobile ? Firefox Android Support complet 45Opera Android Aucun support NonSafari iOS ? Samsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Prise en charge pour les grilles

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 59Edge ? Firefox Support complet 45IE ? Opera ? Safari Aucun support NonWebView Android Support complet 59Chrome Android Support complet 59Edge Mobile ? Firefox Android Support complet 45Opera Android Aucun support NonSafari iOS ? Samsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

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