Utiliser align-items pour aligner les éléments verticalement

Les principales valeurs de align-items

• flex-start : Aligne les éléments au début du conteneur (généralement le haut).
• flex-end : Aligne les éléments à la fin du conteneur (généralement le bas).
• center : Centre les éléments verticalement dans le conteneur.
• baseline : Aligne les lignes de base des éléments.
• stretch : Étire les éléments pour qu'ils remplissent toute la hauteur du conteneur.

Cas d'utilisation courants

• flex-start : Idéal pour des en-têtes où les éléments doivent être alignés en haut.
• flex-end : Utile pour des footers où les éléments doivent être collés en bas.
• center : Parfait pour centrer des boutons ou des images dans des cartes de contenu.
• baseline : Essentiel pour aligner du texte avec des icônes ou des images.
• stretch : Utilisé pour créer des mises en page où tous les éléments doivent occuper la même hauteur.

Alignement en haut : align-items: flex-start

La propriété align-items: flex-start aligne les éléments flexibles au début de leur ligne, c'est-à-dire généralement en haut. C'est la valeur par défaut et est utile lorsque vous souhaitez que les éléments soient collés au bord supérieur du conteneur.

.flex-container {
    display: flex;
    align-items: flex-start;
}

Alignement en bas : align-items: flex-end

La propriété align-items: flex-end aligne les éléments flexibles à la fin de leur ligne, c'est-à-dire généralement en bas. Cette valeur est souvent utilisée pour créer des footers ou des éléments collés au bas d'un conteneur.

.flex-container {
    display: flex;
    align-items: flex-end;
}

Centrage vertical : align-items: center

La propriété align-items: center aligne les éléments flexibles au centre vertical de leur ligne, quelle que soit leur taille. Cette valeur est pratique pour centrer du texte ou des images à l'intérieur d'un conteneur.

.flex-container {
    display: flex;
    align-items: center;
}

Alignement sur la ligne de base : align-items: baseline

La propriété align-items:baseline aligne les lignes de base des éléments flexibles. Cela est particulièrement utile pour aligner du texte avec des éléments inline tels que des images ou des icônes, en s'assurant que les lignes de base des caractères sont alignées.

.flex-container {
    display: flex;
    align-items: baseline;
}

Étirement sur toute la hauteur : align-items: stretch

La propriété align-items: stretch étire les éléments flexibles pour qu'ils occupent toute la hauteur disponible du conteneur parent. C'est idéal lorsque vous souhaitez que tous les éléments aient la même hauteur, quelle que soit leur contenu intrinsèque.

.flex-container {
    display: flex;
    align-items: stretch;
}

Problèmes courants et solutions

Si align-items ne fonctionne pas comme prévu, voici quelques points à vérifier :

• Le conteneur a bien display: flex activé.
• La hauteur du conteneur est définie, sinon les éléments n'auront pas d'espace vertical à aligner.
• Les éléments enfants n'ont pas de styles qui contredisent l'alignement, comme des marges ou des hauteurs fixes.

Bonnes pratiques

• Assurez-vous que la hauteur du conteneur est suffisante pour permettre un alignement visible.
• Testez l'effet de align-items sur des écrans de différentes tailles pour garantir un design responsive.
• Combinez align-items avec justify-content pour un alignement à la fois horizontal et vertical.
• Évitez d'utiliser stretch si les dimensions des éléments enfants doivent rester proportionnelles.