place-self - Propriété CSS

place-self

Résumé des caractéristiques de la propriété `place-self`

Description rapide

Définit l'alignement d'un élément aussi bien dans la direction inline que dans la direction block.

Statut

Standard

Pourcentages

Ne s'appliquent pas.

Valeur initiale

auto

Héritée par défaut

Non

Type d'animation

Discrète : lors d'une animation, la propriété place-self passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Alignement des blocs

Références (W3C)

CSS Box Alignment Module Level 3

Statut du document:: WD (document de travail)

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.

Fonctionnement de place-self

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.

Pour des explications plus détaillées, reportez-vous à la description des propriétés align-self, justify-self et place-items.

Syntaxes 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.
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.
place-self: initial; place-self: inherit; place-self: revert; place-self: revert-layer; place-self: unset;

La valeur initiale est : auto.

Animation de la propriété `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.

Prise en charge par les navigateurs (compatibilité).

Colonne 1

Prise en charge de la propriété place-self appliquée à un élément de conteneur flex.

Colonne 2

Prise en charge de la propriété place-self appliquée à un élément de conteneur grille.

place-self
(Flex-box)

place-self
(Grid)

Estimation de la prise en charge en pourcentage du parc actuel.

93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 109 (2023)

Chrome

Version testée : 109 (2023)

Chrome pour Androïd

Version testée : 109 (2023)

Edge

Version testée : 109 (2023)

Firefox

Version testée : 109 (2023)

Firefox pour Androïd

Version testée : 107 (2022)

Internet Explorer

Version testée : 11 (2013)

Opéra

Version testée : 92 (2022)

Opéra Mobile

Version testée : 72 (2022)

Safari

Version testée : 16.3 (2023)

Safari sur IOS

Version testée : 16.3 (2023)

Samsung Internet

Version testée : 19.0 (2022)

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

Caniuse

Voir aussi, dans le même module de standardisation que `place-self`.

Les spécifications CSS éditées par le W3C sont organisées en modules. place-self fait partie du Module CSS - Alignement des blocs (CSS Box Alignment Module). Les définitions suivantes sont également décrites dans ce même module.