align-items |
Aligné les items |
| CSS3 |
|
Syntaxe
|
align-items: baseline|center|flex-start|flex-end|inherit|initial|stretch;
|
Paramètres
| Paramètre |
Description |
| baseline |
Ce paramètre permet d'indiquer que l'item doit être situé à la ligne de base du conteneur, soit généralement en haut. |
| center |
Ce paramètre permet d'indiquer que l'item doit être situé au centre du conteneur. |
| flex-end |
Ce paramètre permet d'indiquer que l'item doit être situé en bas du conteneur. |
| flex-start |
Ce paramètre permet d'indiquer que l'item doit être situé en haut du conteneur. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hériter des propriétés du parent de cette propriété. |
| initial |
Ce paramètre permet d'indiquer qu'il faut utiliser la valeur par défaut de cette propriété. |
| stretch |
Ce paramètre permet d'indiquer que l'item doit s'étirer afin de prendre l'espace restant. C'est la valeur par défaut. |
Description
Cette propriété permet d'indiquer l'alignement par défaut pour les items à l'intérieur d'un conteneur flexible.
Remarques
- Alignement des éléments dans l'axe transversal : La propriété align-items sert à définir comment les éléments d'un conteneur flexbox ou grid
sont alignés dans l'axe transversal (perpendiculaire à l'axe principal). Par exemple, dans un conteneur flexbox avec flex-direction: row, elle aligne les éléments
verticalement.
- S'applique à tous les enfants du conteneur : Contrairement à align-self, permettant de définir l'alignement d'un élément individuel, align-items
s'applique à tous les enfants d'un conteneur. Elle offre une méthode simple et cohérente pour aligner l'ensemble des éléments de manière uniforme.
- Valeur par défaut stretch : Par défaut, la valeur de align-items est stretch. Cela signifie que les éléments flex ou grid s'étendent automatiquement
pour remplir la hauteur (ou largeur, dans le cas d'une écriture verticale) de leur conteneur, à moins qu'une taille spécifique ne soit définie pour ces éléments.
- Différentes valeurs disponibles : La propriété accepte plusieurs valeurs comme flex-start, flex-end, center, baseline, et stretch.
Ces options permettent d'aligner les éléments soit en haut, en bas, au centre, sur leur ligne de base, ou de les étirer pour occuper l'espace disponible dans l'axe transversal.
- Utilisation dans un conteneur Grid : En mode CSS Grid, align-items contrôle l'alignement des éléments dans l'axe de la grille, indépendamment de leur
alignement dans les pistes de la grille. Cela permet une grande flexibilité pour positionner les éléments à l'intérieur de chaque cellule de la grille.
- Interaction avec des marges et hauteurs spécifiques : Lorsque les enfants du conteneur ont des marges, des hauteurs fixes ou des valeurs de min-height ou
max-height, ces propriétés peuvent interagir avec align-items. Par exemple, si un élément a une hauteur supérieure à celle du conteneur, les valeurs comme
stretch ou center peuvent ne pas fonctionner comme prévu.
- Impact visuel dans les interfaces utilisateur : align-items est couramment utilisée pour centrer verticalement des éléments dans des barres de navigation Web,
des cartes ou des boutons. La valeur center est particulièrement utile pour garantir un positionnement cohérent, quelles que soient les dimensions des enfants.
- Compatibilité avec les anciens navigateurs Web : Bien que largement prise en charge dans les navigateurs modernes, la propriété align-items peut poser
problème dans les versions anciennes de certains navigateurs Web, comme Internet Explorer. Dans ces cas, des solutions de
repli comme des marges ou des hacks CSS peuvent être nécessaires pour obtenir un alignement similaire.
Dernière mise à jour : Dimanche, le 20 décembre 2015
