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.

Exemple interactif

Syntaxe

css
/* 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

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

<align-self> = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<justify-self> = 
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  anchor-center                                       

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

Spécifications

Specification
CSS Box Alignment Module Level 3
# place-self-property

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi