Propriété CSSFlexbox
align-self
Remplace l’alignement d’un seul élément sur l’axe secondaire.
- Valeur initiale
auto- Héritée
- Non
- Animable
- non
- S’applique à
- éléments flex, éléments grid et éléments en position absolue
- JavaScript
element.style.alignSelf = "flex-end"
Exemple
#CSS
.row {
display: flex;
align-items: flex-start;
}
.row .action {
align-self: center;
}HTML de l’exemple
<div class="row stage" style="gap: 12px;">
<div><strong>Module 3 : Flexbox</strong><br>Axe principal, axe secondaire et alignement des éléments dans le conteneur.</div>
<button class="action" type="button">Start</button>
</div>Aperçu
Définition et utilisation
#La propriété align-self se règle sur un élément flex ou grid isolé, et non sur le conteneur. Elle permet de sortir cet élément de l’alignement général fixé par align-items du parent.
Exemples typiques : un bouton collé en bas d’une carte, une icône centrée verticalement à côté d’un texte haut, ou un seul élément étiré pendant que les autres restent en haut.
La valeur auto signifie « faire ce que dit align-items du parent ».
Syntaxe
#Syntaxe
align-self: auto | stretch | flex-start | flex-end | center | baseline;Valeurs
#Valeurs en pratique
#auto
L’élément suit
align-items du parent (ici flex-start)..target { align-self: auto; }center
Seul l’élément 2 se place au centre.
.target { align-self: center; }flex-end
Seul l’élément 2 se colle en bas.
.target { align-self: flex-end; }stretch
L’élément 2 s’étire sur toute la hauteur.
.target { align-self: stretch; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour aligner sur l’axe principal, Flexbox n’a pas de
justify-self. Utilisez une margeauto, par exemplemargin-left: auto. align-selfse règle sur l’enfant,align-itemssur le parent.
Entrées associées
#- align-itemsAligne les éléments sur l’axe secondaire d’un conteneur flex ou grid.
- justify-selfAligne un seul élément dans sa cellule de grille le long de l’axe horizontal.
- orderChange l’ordre d’affichage d’un élément dans un conteneur flex ou grid.
- marginDéfinit l’espace extérieur d’un élément par rapport à ses voisins.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.