La propriété align-self de CSS est utilisée pour aligner les éléments sélectionnés dans un conteneur flexible de plusieurs manières différentes, telles que flex-end, center, flex-start, etc.
Remarque : La propriété align-self a la priorité sur la propriété align-items du conteneur souple.
La Syntaxe CSSalign-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
Valeurs par défaut | auto |
---|---|
Inherited: | non |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.alignSelf="center" |
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 21 | 11 | 20 | 9 21.1 -webkit- | 21.1 |
Exemple aligner les éléments avec align-self Copier le code
<!DOCTYPE html> <html> <head> <style> #main { width: 400px; height: 300px; border: 1px solid black; display: flex; align-items: flex-start; } #main div { flex: 1; } #Div_BLEU { align-self: center; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">JE SUIS ROUGE</div> <div style="background-color:lightblue;" id="Div_BLEU">JE SUIS BLUE<BR>et je suis aligné avec aligne-self</div> <div style="background-color:lightgreen;">JE SUIS VERT ET LE BLEU EST ALIGNé AVEC align-self</div> </div> </body> </html>
Valeur | Description |
---|---|
auto | Valeur par défaut. L'élément hérite de la propriété align-items de son conteneur parent, ou "stretch" s'il n'a pas de conteneur parent. |
Stretch | Les éléments sont étirés pour s'adapter au conteneur |
center | Les éléments sont positionnés au centre du conteneur |
flex-start | Les éléments sont positionnés au début du conteneur |
flex-end | Les éléments sont positionnés à la fin du conteneur |
baseline | Les éléments sont positionnés à la ligne de base du conteneur. |
initial | Définit cette propriété à sa valeur par défaut. |
inherit | Hérite de cette propriété de son élément parent. Lire à propos de inherit |
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENT