Exemple
Centrez les alignements pour tous les éléments de la flexibilité <div> élément:
div
{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
Essayez - le vous - même » Définition et utilisation
La propriété align-éléments spécifie l'alignement par défaut des éléments à l'intérieur du conteneur souple.
Tip: Utilisez la propriété align-auto de chaque élément à remplacer la propriété align-éléments.
| Valeur par défaut: | stretch |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.alignItems="center" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- spécifient la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| align-items | 21,0 | 11.0 | 20,0 | 9.0 7,0 -webkit- | 12.1 |
Syntaxe CSS
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| stretch | Défaut. Les articles sont étirés pour remplir le récipient | Joue-le " |
| center | Les éléments sont positionnés au centre du récipient | Joue-le " |
| flex-start | Les éléments sont positionnés au début du conteneur | Joue-le " |
| flex-end | Les éléments sont positionnés à l'extrémité du récipient | Joue-le " |
| baseline | Les éléments sont positionnés à la base du récipient | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Pages associées
Référence CSS: la align-content property
CSS Référence: align-self property
Référence HTML DOM: alignItems property