align-self - Propriété CSS
Résumé des caractéristiques de la propriété align-self
auto
| normal
| stretch
| center
| start
| end
| flex-start
| flex-end
| baseline
| first baseline
| last baseline
auto
align-self
passe d'une valeur à l'autre sans transition.Description de 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 gérer la disposition de tous les éléments de façon globale, reportez-vous aux propriétés
align-items
et align-content
, à appliquer sur le container.
Pour une présentation détaillée des possibilités des flex-box ou des grilles, reportez-vous
aux pages flex
et grid
.
Syntaxes pour align-self
.
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.AaAaAaAaAaAa - 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 valeurstart
.AaAaAaAaAaAa - align-self: center;
L'élément est centré verticalement dans sa ligne.
AaAaAaAaAaAa - 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.AaAaAaAaAaAa - 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.AaAaAaAaAaAa - 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 surstart
, 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;
AaAaAaAaAaAa - 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 valeurbaseline
ne donne le résultat escompté que si au moins deux éléments de la ligne sont alignés suivant cette valeur.Dans l'exemple ci-dessous les trois premiers éléments sont alignés sur leur ligne de base du texte (
align-self:baseline
). 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.AaAaAaAaAaAa - align-self:
initial
; align-self:inherit
; align-self:revert
; align-self:revert-layer
; align-self:unset
;La valeur initiale est :
.auto
Manipulation de la propriété align-self
par programme.
Dans les exemples de code ci-après, le paramètre el
représente l'élément de la page sur lequel on souhaite travailler.
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).
function setAlignSelf(el) {
el.style['align-self']='center';
// ou
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 el
dans le code HTML.
La valeur est renvoyée telle qu'elle a été définie : une des valeurs acceptées par la propriété.
function getAlignSelf(el) {
alert(el.style['align-self']);
// ou
alert(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.
La valeur est retournée telle qu'elle a été définie dans la feuille de styles.
function getCalcAlignSelf(el) {
alert(window.getComputedStyle(el).getPropertyValue('align-self'));
}
Modifier la propriété align-self
ou lire sa valeur calculée avec JQuery.
function setAlignSelf(el) {
$(el).css('align-self','stretch');
// ou
$(el).css('alignSelf','stretch');
}
function getCalcAlignSelf(el) {
alert($(el).css('align-self'));
// ou
alert($(el).css('alignSelf'));
}
Utilisation de align-self
sur un flex-box.
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).
Prise en charge par les navigateurs (compatibilité).
align-self
dans le contexte d'un conteneur flex.
align-self
dans le contexte d'une grille.
align-self
.
align-self
(flex-box)
align-self
(grid)
safe
unsafe
first
baseline
last
baseline
start
end
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que align-self
.
Les spécifications CSS éditées par le W3C sont organisées en modules. align-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.