OUJOOD.COM
Définition et utilisation de la propriété css align-items
La propriété align-items spécifie l'alignement par défaut des éléments à l'intérieur du conteneur flexible.Astuce : utilisez la propriété align-self de chaque élément pour remplacer la propriété align-items.
La Syntaxe CSS
align-items: stretch|center|flex-start |flex-end|baseline|initial|inherit;
| Valeurs par défaut | Stretch |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.alignItems="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 | 7 21.1 -webkit- |
Exemple centrer les éléments avec align-items 📋 Copier le code
<!DOCTYPE html>
<html >
<head>
<title>align-items: center</title>
<style>
#conteneur {
width: 220px;
height: 300px;
border: 1px solid black;
display: flex;
align-items: center;
}
#conteneur div {
flex: 1;
border: 1px solid black;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<h2>centrer les éléments avec align-items: center</h2>
<div id="conteneur">
<div style="background-color:coral;min-height:30px;">Je suis le rouge</div>
<div style="background-color:lightblue;min-height:100px;">Je suis le bleu</div>
<div style="background-color:lightgreen;min-height:190px;">Et moi le vert.</div>
</div>
<p><b>Note:</b> Internet Explorer 10 et les versions antérieures
ne prennent pas en charge la propriété align-items..</p>
</body>
</html>
Valeurs de la propriété align-items
| Valeur | Description |
|---|---|
| Stretch | Par défaut. 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 |