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.

Syntaxe formelle

<'align-self'> <'justify-self'>?

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 initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitéblock-level boxes, absolutely-positioned boxes, and grid items
Héritéenon
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • align-self: auto sera calculé comme auto pour les éléments positionnés de façon absolue, sera calculé comme align-items sur le parent (excepté les mots-clés historiques utilisés) de toutes les autres boîtes ou comme start si la boîte n'a pas de parent. Son comportement dépend du modèle de disposition, décrit dans justify-self, sinon ce sera la valeur spécifiée.
  • justify-self: comme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Prise en charge pour les dispositions flexibles

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Supported in Flex LayoutChrome Support complet 59Edge Aucun support NonFirefox Support complet 45IE Aucun support NonOpera Support complet 46Safari Aucun support NonWebView Android Support complet 59Chrome Android Support complet 59Firefox Android Support complet 45Opera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Prise en charge pour les grilles

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Supported in Grid LayoutChrome Support complet 59Edge Aucun support NonFirefox Support complet 45IE Aucun support NonOpera Support complet 46Safari Aucun support NonWebView Android Support complet 59Chrome Android Support complet 59Firefox Android Support complet 45Opera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi