OUJOOD.COM
Définition et utilisationde la propriété align-self
La propriété align-self est une sous-propriété du module Flexible Box Layout.Elle permet de remplacer la valeur align-items pour des éléments flex spécifiques.
La propriété align-self spécifie l'alignement de l'élément sélectionné à l'intérieur du conteneur souple.
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" |
Prise en charge de la propriété css align-items dans navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| 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>
Valeurs de la propriété align-items
| 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 |