place-self
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
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
/* 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 commestretch
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 destart
.
- Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme
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
, silast 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
-
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
-
Les propriétés détaillées correspondantes