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é. Lorsque le conteneur est une grille, align-self permet d'aligner l'élément au sein de la zone de grille.

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

Syntaxe

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

/* Alignement géométrique */
/* align-self ne gère pas les valeurs left et right */
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 */

/* 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;

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 | normal | stretch | <baseline-position> | <overflow-position>? <self-position>


<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

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 Level 3
La définition de 'align-self' dans cette spécification.
Version de travail  
CSS Flexible Box Layout Module
La définition de 'align-self' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initialeauto
Applicabilitéflex items, grid items, and absolutely-positioned boxes
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

Compatibilité des navigateurs

Prise en charge pour les dispositions avec les boîtes flexibles (Flexbox)

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 36
Support complet 36
Support partiel 29
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Before Firefox 27, only single-line flexbox is supported.
Aucun support 18 — 20
Désactivée
Désactivée From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 48
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11Opera Support complet 12.1Safari Aucun support NonWebView Android Support complet 37
Support complet 37
Support partiel 4.4
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 36
Support complet 36
Support partiel 29
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet OuiOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?
start and endChrome ? Edge ? Firefox Support complet OuiIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome ? Edge ? Firefox Support complet 52IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 52Opera Android ? Safari iOS ? Samsung Internet Android ?
baselineChrome ? Edge ? Firefox Support complet OuiIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
first baseline and last baselineChrome ? Edge ? Firefox Support complet 52IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 52Opera Android ? Safari iOS ? Samsung Internet Android ?
stretchChrome ? Edge ? Firefox Support complet 52IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 52Opera Android ? Safari iOS ? Samsung Internet Android ?
safe and unsafeChrome Aucun support NonEdge Aucun support NonFirefox Support complet 63IE Aucun support NonOpera Aucun support NonSafari ? WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 63Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Prise en charge pour les dispositions avec les grilles CSS

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 57Edge Support complet 16Firefox Support complet 52IE Support partiel 10
Préfixée Notes
Support partiel 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes IE10 and 11 have the property -ms-grid-column-align which acts in a similar way to align-self.
Opera Support complet 44Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 52Edge Mobile Support complet OuiFirefox Android Support complet 52Opera Android Support complet 44Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.2

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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