Align-self - Propriété CSS

align-self

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

Description rapide
Gère la disposition de l'un des éléments dans une grille suivant l'axe secondaire, qui est le plus souvent vertical.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto | normal | stretch | center | start | end | flex-start | flex-end | baseline | first baseline | last baseline
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é align-self passe d'une valeur à l'autre sans transition.
Ordre canonique
Per grammar : sérialisation dans l'ordre de la syntaxe.
Module W3C
Module CSS - Alignement des blocs
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de align-self.

align-self - Syntax DiagramSyntax diagram of the align-self CSS property. auto auto normal normal stretch stretch first* first* last last unsafe* unsafe* safe safe baseline baseline start start center center end end self-end self-end self-start self-startalign-self:;align-self:;
Schéma syntaxique de la propriété align-self.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG

* indique une valeur par défaut, qui peut être omise.

Description de la propriété align-self.

align-self est une propriété CSS. Elle gère l'alignement d'un des éléments internes dans un container flexible ou dans une grille. Elle permet de gérer l'alignement élément par élément, contrairement aux propriétés align-content et align-items, qui agissent sur tous les éléments.

Appliqué à un élément dans un flex-box, la propriété align-self gère la position de cet élément suivant l'axe secondaire. La plupart du temps, pour les langues latines, il s'agira de l'axe vertical.
Rappel : le choix de l'axe principal et secondaire dans un flex-box est défini par le propriété flex-direction.

Appliqué à un élément dans une grille, align-self gère la position de cet élément dans sa cellule, suivant l'axe des lignes (vertical).

Pour une présentation détaillée des possibilités des flex-box ou des grilles, reportez-vous aux pages flex et grid.

Autres propriétés à connaître.

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

Définit le positionnement dans un flex-box ou une grille suivant l'axe principal (le plus souvent horizontal).
Gère l'alignement des éléments dans un conteneur grille suivant l'axe principal, qui est le plus souvent horizontal.
Définit le positionnement d'un élément particulier dans un flex-box ou une grille suivant l'axe principal, qui souvent horizontal.
Gère la disposition des éléments dans un flex-box ou une grille, suivant l'axe secondaire (le plus souvent vertical).
Gère la disposition des éléments dans une grille suivant l'axe secondaire (vertical le plus souvent).
Gère la disposition des éléments dans un flex-box ou une grille suivant l'axe principal et l'axe secondaire.
Définit le placement des éléments dans leur cellule (dans le contexte d'une grille) suivant les deux axes (principal et secondaire).
Définit l'alignement d'un élément aussi bien suivant l'axe principal et suivant l'axe secondaire.

Valeurs pour align-self.

Dans les explications ci-dessous, nous avons considéré que l'axe principal du flex-box est l'axe horizontal. L'axe secondaire est donc l'axe vertical. Cette disposition est la plus courante pour les langues latines.

  • align-self: auto;

    L'élément est positionné comme tous les autres, conformément à la propriété align-items du container flex-box.

    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
  • align-self: stretch;

    L'élément est étiré pour remplir toute la hauteur de la ligne. Pour que l'effet soit bien visible, la propriété align-items du conteneur a été positionnée la valeur start.

    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
  • align-self: center;

    L'élément est centré verticalement dans sa ligne.

    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
  • align-self: flex-start; align-self: start;

    L'élément est positionné en haut de sa ligne.
    La première valeur est plutôt adaptée au container du type flex-box, tandis que la deuxième est plutôt réservée aux grilles mais les navigateurs ne font pas de différences.

    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
  • align-self: flex-end; align-self: end;

    L'élément est positionné en bas de sa ligne.
    La première valeur est plutôt adaptée au container du type flex-box, tandis que la deuxième est plutôt réservée aux grilles mais les navigateurs ne font pas de différences.

    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
  • align-self: self-start; align-self: self-end;

    L'élément est positionné en bas ou en haut de la hauteur de sa ligne, compte tenu de ses propres paramètres d'écriture.

    Les deux éléments verts ci-dessous ont leur propriété align-self fixée sur start, les deux ont un mode d'écriture vertical, mais le deuxième à sens d'écriture du bas vers le haut. Cela impacte leur positionnement.

    /* Styles du 1er élément */ /* Styles du 2ème élément */ writing-mode:vertical-rl; writing-mode:vertical-rl; direction:ltr; direction:rtl; align-self:self-start; align-self:self-start;
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
  • align-self: baseline; align-self: first baseline; align-self: last baseline;

    L'élément est positionné verticalement par rapport à la ligne de base du texte.
    Dans la mesure où align-self s'applique à des éléments individuels du flex box ou de la grille, la valeur baseline ne donne le résultat escompté que si au moins deux éléments de la ligne sont alignés suivant cette valeur.

    Ligne de base du texte

    Dans l'exemple ci-dessous les trois premiers éléments sont alignés sur la ligne de base du texte (align-self:baseline). Le premier exemple aligne sur la première ligne, et le deuxième exemple sur la dernière ligne. On constate effectivement que, malgré leurs tailles de caractères différentes, et leurs marges intérieures (padding) également différentes, les lignes de base des textes sont alignées.

    Aa1
    Aa2
    Aa3
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    align-self:first baseline;
    Aa1
    Aa2
    Aa3
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    align-self:last baseline;
  • align-self: safe center; align-self: unsafe end;

    Les mots safe et unsafe peuvent être associés à un alignement du type center ou end (unsafe étant par défaut, il est rare qu'on le précise).

    safe permet de résoudre le problème du débordement par le haut : si le contenu est trop grand pour la place disponible, il peut se retrouver masqué. Si l'élément est centré ou aligné par le bas, ce débordement peut se faire par le haut de l'élément (c'est le début du texte qui est masqué). Dans ce cas, même la barre de défilement ne permettra pas d'afficher la partie du contenu qui est masquée.

    Avec le mot safe le navigateur placera toujours les débordements de contenu vers le bas, quitte à ne pas respecter scrupuleusement l'alignement demandé. La valeur unsafe au contraire impose que l'alignement soit respecté, même si cela provoque un débordement vers le haut.

    Pour que le fonctionnement soit correct, il faut également appliquer safe sur le container avec align-content.

    Aa1
    Aa2
    Aa3
    Aa4
    Aa5
    Aa6
    Aa7
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Illustration du problème
    de débordement par le haut.
    Aa1
    Aa2
    Aa3
    Aa4
    Aa5
    Aa6
    Aa7
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Résolution du problème avec
    align-content:safe end; sur le container align-items:safe end; sur les éléments
  • align-self: initial; (auto) align-self: inherit; align-self: revert; align-self: revertLayer; align-self: unset;

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

Exemple d'animation de align-self.

La propriété align-self est du type discrete, ce qui veut dire que les animations la font passer brutalement d'une valeur à l'autre.

1
2
3
4
5
6

Accéder à la propriété align-self par programme.

Forcer la valeur de align-self en Javascript.

Javascript propose une syntaxe avec la notation en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

Javascript
let el = document.getElementById('id'); el.style['align-self'] = 'center'; // ou let el = document.getElementById('id'); el.style.alignSelf = 'center';

Relire en Javascript la valeur de align-self.

La propriété doit avoir été affectée directement à l'élément lui-même et pas en passant par un sélecteur. Autrement dit, ce code explore l'attribut style de l'élément. La valeur est renvoyée telle qu'elle a été définie : une des valeurs acceptées par la propriété.

Javascript
let el = document.getElementById('id'); let value = el.style['align-self']; // ou let el = document.getElementById('id'); let value = el.style.alignSelf;

Lire la valeur calculée de align-self en Javascript.

La valeur calculée est celle qui a été affectée à l'élément, soit directement, soit via un sélecteur, ou celle qui résulte du mécanisme d'héritage. A défaut e sera la valeur initiale de la propriété : auto dans le cas de align-self.

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('align-self');

Modifier la propriété align-self avec JQuery.

JQuery propose également une syntaxe (plus courte que celle de Javascript) pour lire et écrire la propriété.

JQuery

$('#id').css('align-self', 'center');
// ou
$('#id').css('alignSelf', 'center');

Lire la valeur calculée avec JQuery.

JQuery
let value = $('#id').css('align-self');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété align-self et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de align-self. Ceci dit, dans le cas de align-self, cela ne fera pas une grande différence.

Utilisation de align-self sur un flex-box et une grille.

Le simulateur ci-dessous ajuste la propriété align-self des blocs n° 2 et n° 3 (encadrés en rouge), aussi bien dans le flex-box (premier exemple) que dans la grille (deuxième exemple).
Les tailles des polices de chacun des éléments sont différentes pour bien montrer l'effet de la valeur baseline.

flex-direction : (pour le flex box).
align-self :
Flex-box
1
2
3
4
5
Grille
1
2
3
4
5
6
7
8
9

Compatibilité des navigateurs avec align-self.

Colonne 1
Prise en charge de la propriété align-self dans le contexte d'un conteneur flex-box.
Colonne 2
Prise en charge de la propriété align-self dans le contexte d'une grille.
Colonne 3
Prise en charge des valeurs start et end pour la propriété align-self.

Remarques :

(1) Internet Explorer 10 et 11 utilisent la propriété -ms-grid-row-align qui fonctionne d'une façon comparable à align-self.

1
Propriété
align-self
(flex-box)
2
Propriété
align-self
(grille)
3
Valeurs
start et end
Estimation de la prise en charge globale.
96%
96%
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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

Histoire de la propriété align-self.

Les propriétés d'alignement (dont align-self) ont été introduites dans les spécifications concernant les grilles et les flex-box. Un module spécifique aux alignements a ensuite été ajouté. Il reprend les descriptions de toutes les propriétés relatives aux alignements des blocs.

Autres propriétés du module CSS - Alignement des blocs.

Propriétés :

align-content
Gère la disposition des éléments dans un flex-box ou une grille, suivant l'axe secondaire (le plus souvent vertical).
align-items
Gère la disposition des éléments dans une grille suivant l'axe secondaire (vertical le plus souvent).
Align-self
Gère la disposition de l'un des éléments dans une grille suivant l'axe secondaire, qui est le plus souvent vertical.
column-gap
Définit l'espacement entre les colonnes.
gap
Définit les espacements entre les lignes et entre les colonnes dans le contexte d'une grille, d'un flex-box, ou d'une mise en page sur plusieurs colonnes)
grid-column-gap
Spécifie l'espacement entre les colonnes dans une grille.
grid-gap
Ajuste l'espacement des lignes et des colonnes dans le contexte d'une grille.
grid-row-gap
Spécifie l'espacement entre les lignes dans une grille.
justify-content
Définit le positionnement dans un flex-box ou une grille suivant l'axe principal (le plus souvent horizontal).
justify-items
Gère l'alignement des éléments dans un conteneur grille suivant l'axe principal, qui est le plus souvent horizontal.
justify-self
Définit le positionnement d'un élément particulier dans un flex-box ou une grille suivant l'axe principal, qui souvent horizontal.
place-content
Gère la disposition des éléments dans un flex-box ou une grille suivant l'axe principal et l'axe secondaire.
place-items
Définit le placement des éléments dans leur cellule (dans le contexte d'une grille) suivant les deux axes (principal et secondaire).
place-self
Définit l'alignement d'un élément aussi bien suivant l'axe principal et suivant l'axe secondaire.
row-gap
Définit l'espace entre les lignes d'une grille.