Place-self - Propriété CSS

Description de la propriété place-self.

place-self est une propriété raccourcie qui permet de définir en une seule règle les propriétés align-self et justify-self. Autrement dit, place-self gère l'alignement complet (suivant les deux axes) d'un élément contenu dans un container flex-box ou dans une grille.

Contrairement à place-items qui gère l'alignement de l'ensemble des éléments contenus dans un flex-box ou dans une grille, la propriété place-self ne gère l'alignement que de un des éléments. Elle ne doit donc pas être appliquée au container flex-box ou au container grille, mais à l'élément dont on souhaite gérer l'emplacement.

Autres propriétés à connaître.

Ces propriétés concernent toutes le positionnement des éléments dans une grille.

Valeurs pour place-self.

• place-self: start center;

  Sur cet exemple de syntaxe, deux valeurs sont indiquées, séparées par un espace. La propriété align-self (correspondant le plus souvent à l'axe vertical), est définie à la valeur start, et la propriété justify-self(correspondant le plus souvent à l'axe horizontal), est définie à la valeur center.

  Grille
  place-self:end start;
• place-self: center;

  Lorsqu'une seule valeur est indiquée pour place-self, les propriétés align-self et justify-self sont toutes les deux définies à cette valeur.

  Grille
  place-self:center;
• place-self: initial; (auto) place-self: inherit; place-self: revert; place-self: revertLayer; place-self: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de place-self.

L'animation ci-dessous explore les principales valeurs pour la propriété place-self. Il s'agit d'une grille ne contenant qu'un seul élément. L'animation est appliquée sur cet élément, conformément à l'utilisation habituelle de place-self.

⚠ Sur Firefox   l'animation ne fonctionne pas.

Exemple interactif avec la propriété place-self.

Le simulateur applique la propriété place-self sur l'élément numéro 2 d'une grille (en bleu). Il ne prend en compte que les valeurs principales. Reportez-vous aux propriétés align-self et justify-self pour des exemples plus complets.

Compatibilité des navigateurs avec place-self.

1

Propriété
place-self
(flex-box)

2

Propriété
place-self
(grille)

Estimation de la prise en charge globale.

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété place-self.

• Module CSS - Alignement des blocs - Niveau 3

  Concernant place-self. Contrairement à ce qu'on pouvait attendre le propriété place-items. n'est pas décrite dans le modèle sur les flex-box mais dans ce module sur l'alignement des blocs.
  

  12 Juin 2012

  Document de travail.

  

  

  

Voir aussi, au sujet du placement des blocs.

Les spécifications CSS concernant les flex-box sont regroupés dans un module spécifique (CSS Flexible Box Layout), mais place-self est décrit dans le module Module CSS - Alignement des blocs. Vous y trouverez également toutes les autres propriétés relatives au placement des blocs.

Propriétés :