Propriété CSS align-items
La propriété CSS align-items définit l'alignement par défaut des éléments flex. Elle est similaire à la propriété justify-content, mais aligne les éléments le long de l'axe transversal (généralement vertical, selon flex-direction).
Remarque : Cette propriété ne s'applique qu'aux conteneurs flex et grid.
Cette propriété fait partie des propriétés CSS3.
La propriété align-items accepte les valeurs suivantes :
- stretch
- flex-start
- center
- flex-end
- baseline
| Valeur initiale | stretch |
|---|---|
| S'applique à | Conteneurs flex et grid. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.alignItems = "center"; |
Syntaxe
Syntaxe de la propriété CSS align-items
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;Exemple de la propriété align-items :
Exemple de la propriété CSS align-items avec la valeur stretch
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: stretch;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: stretch; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Résultat
Dans l'exemple suivant, les éléments sont positionnés au centre du conteneur.
Exemple de la propriété align-items avec la valeur "center" :
Exemple de la propriété CSS align-items avec la valeur center
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: center;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: center; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Dans l'exemple suivant, les éléments sont placés au début.
Exemple de la propriété align-items avec la valeur "flex-start" :
Exemple de la propriété CSS align-items avec la valeur flex-start
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: flex-start;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-start; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Ici, nous appliquons la valeur "flex-end" qui place les éléments à la fin du conteneur.
Exemple de la propriété align-items avec la valeur "flex-end" :
Exemple de la propriété CSS align-items avec la valeur flex-end
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: flex-end;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-end; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Voyons notre dernier exemple avec la valeur "baseline" qui place les éléments sur la ligne de base du conteneur.
Exemple de la propriété align-items avec la valeur "baseline" :
Exemple de la propriété CSS align-items avec la valeur baseline
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: baseline;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: baseline; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Résultat
Valeurs
| Valeur | Description | Tester |
|---|---|---|
| stretch | Étire les éléments pour qu'ils s'adaptent au conteneur. Il s'agit de la valeur par défaut de cette propriété. | Tester » |
| center | Les éléments sont placés au centre du conteneur. | Tester » |
| flex-start | Les éléments sont placés au début du conteneur. | Tester » |
| flex-end | Les éléments sont placés à la fin du conteneur. | Tester » |
| baseline | Les éléments sont positionnés sur la ligne de base du conteneur. | Tester » |
| initial | Définit la valeur par défaut de la propriété. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelles sont les valeurs possibles pour la propriété 'align-items' en CSS ?