MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

align-self

La propriété CSS align-self permet d'aligner les objets flexibles d'une ligne flexible en surchargeant la valeur donnée par align-items. Si l'un des objet a une marge automatique (auto) pour l'axe perpendiculaire à l'axe principal, align-self sera ignoré.

Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.

/* Valeurs avec un mot-clé */
align-self: auto;
align-self: normal;

/* Alignement géométrique */
align-self: center; /* Les éléments sont alignés sur le centre */
align-self: start; /* Les éléments sont alignés au début de l'axe */
align-self: end; /* Les éléments sont alignés à la fin de l'axe */
align-self: self-start; /* Les éléments sont alignés par rapport à leur début */
align-self: self-end; /* Les éléments sont alignés par rapport à leur fin */
align-self: flex-start; /* Les éléments flexibles sont alignés au début */
align-self: flex-end; /* Les éléments flexibles sont alignés à la fin */
align-self: left; /* Les éléments sont alignés à gauche */
align-self: right; /* Les éléments sont alignés à droite */

/* Alignement selon la ligne de base */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Les objets dimensionnés avec 'auto' sont */
                     /* étirés pour remplir le conteneur */

/* Alignement avec gestion du dépassement */
align-self: safe center;
align-self: unsafe center;

/* Valeurs globales */
align-self: inherit;
align-self: initial;
align-self: unset;

Valeur initialeauto
Applicabilitééléments flexibles, y compris les pseudo-éléments intégrés dans le flux
Héritéenon
Médiavisuel
Valeur calculéeauto sera calculé comme auto pour les éléments positionnés de façon absolue, sera calculé comme align-items sur le parent (excepté les mots-clés historiques utilisés) de toutes les autres boîtes ou comme start si la boîte n'a pas de parent. Son comportement dépend du modèle de disposition, décrit dans justify-self, sinon ce sera la valeur spécifiée.
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

auto
La valeur est calculée par rapport à celle de align-items.
normal
L'effet de ce mot-clé dépend du mode de disposition utilisé :
  • Pour une disposition absolue, ce mot-clé est synonyme de start pour les boîtes remplacées positionnées de façon absolue, il est synonyme de stretch pour les autres boîtes positionnées de façon absolue.
  • Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de stretch.
  • Pour les éléments flexibles, ce mot-clé est synonyme de stretch.
  • Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de stretch, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme start.
  • Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.
self-start
Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.
self-end
Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.
flex-start
Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.
flex-end
Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.
center
La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.
baseline
first baseline

last baseline
Indique l'alignement par rapport à la ligne de base.
Si besoin, la valeur first baseline est remplacée par start et last baseline est remplacée par end.
stretch
Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par max-height/max-width ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.
safe
Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur start avait été utilisée.
unsafe
Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.

Syntaxe formelle

auto | flex-start | flex-end | center | baseline | stretch

CSS

.flex-container {
  height: 250px;
  display: flex;
}

.element-flex {
  background: palegreen;
  width: 100px;
  padding: 5px;
  margin: 5px;
  line-height: 50px;
  font-size: 2em;
} 

.center {
  -webkit-align-self: center;
  align-self: center;
}

.baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
}

.stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}

HTML

<div class="flex-container">
  <p class="element-flex center">Milieu</p>
  <p class="element-flex baseline">Base</p>
  <p class="element-flex stretch">Étiré</p>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Box Alignment Module
La définition de 'align-self' dans cette spécification.
Version de travail Ajout des valeurs [ first | last ]? baseline, self-start, self-end, start, end, left et right.
CSS Flexible Box Layout Module
La définition de 'align-self' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 21.0-webkit
36.0
(Oui) 20.0 (20.0)[1] 11.0 12.10 Pas de support
start, end ? ? (Oui) ? ? ?
left, right ? ? 52.0 (52.0) ? ? ?
baseline ? ? (Oui) ? ? ?
first baseline, last baseline ? ? 52.0 (52.0) ? ? ?
stretch ? ? 52.0 (52.0) ? ? ?
Fonctionnalité Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? ? (Oui)-webkit
(Oui)
(Oui) ? Pas de support 12.10
start, end ? ? ? ? ? ? ?
left, right ? ? ? 52.0 (52.0) ? ? ?
baseline ? ? ? (Oui) ? ? ?
first baseline, last baseline ? ? ? 52.0 (52.0) ? ? ?
stretch ? ? ? 52.0 (52.0) ? ? ?

[1] Avant Firefox 27, Firefox ne prenait en charge que les boîtes flexibles sur une seule ligne. Pour Firefox 18 et 19, uk était nécessaire d'activer la préférence layout.css.flexbox.enabled pour bénéficier de cette fonctionnalité. À partir de Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45), en plus de la version non-préfixée, Gecko prend en charge une version avec le préfixe -webkit à des fins de compatibilité web via la préférence layout.css.prefixes.webkit qui était désactivée par défaut. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette préférence est activée par défaut.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,