place-self

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.

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    

• Guide sur les grilles : Aligner des objets dans une grille

• Guide sur les boîtes flexibles : Les concepts de bases

• Guide sur les boîtes flexibles : Aligner des objets dans un conteneur flexible

• Le module de spécification CSS Box Alignment

• Les propriétés détaillées correspondantes

  • align-self
  • justify-self