Aligner individuellement des éléments au sein d’un conteneur flex peut être complexe.
Cette complexité entraîne souvent des résultats incohérents dans la disposition des éléments.
Cet article explore comment utiliser align-self avec Tailwind CSS pour résoudre ces problèmes d’alignement.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Continuons notre exploration de la structuration de page en CSS avec Tailwind CSS . Après avoir vu comment structurer des conteneurs avec Flexbox , nous allons maintenant nous concentrer sur la façon de réorganiser les éléments individuels à l’intérieur de ces conteneurs.
La propriété align-self en CSS permet de contrôler l’alignement individuel d’un élément le long de l’ axe secondaire , indépendamment de son conteneur flex. Cela peut être très utile si vous souhaitez que certains éléments aient un alignement différent par rapport aux autres dans le même conteneur.
En Tailwind CSS , cette fonctionnalité est accessible via la classe utilitaire self-{valeur} , avec plusieurs valeurs possibles pour personnaliser l’alignement d’un élément spécifique :
- self-auto :L’élément suit la règle d’alignement définie par son conteneur. C’est le comportement par défaut si vous n’appliquez pas cette classe.
- self-start :L’élément est aligné au début de l’axe secondaire.
- self-end :L’élément est aligné à la fin de l’axe secondaire.
- self-center :L’élément est centré le long de l’axe secondaire.
- self-stretch :L’élément est étiré pour occuper toute la hauteur disponible le long de l’axe secondaire.
Comme avec l’exemple que vous pouvez voir ici :
- Code :
<div class="flex flex-row justify-between bg-fuchsia-400 h-96 w-96 ">
<div class="bg-blue-500 text-white p-4 self-start">Élément 1</div>
<div class="bg-red-500 text-white p-4 self-center">Élément 2</div>
<div class="bg-green-500 text-white p-4 self-end">Élément 3</div>
</div>
- Résultat :
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment utiliser align-self en Tailwind CSS ?
Quelles sont les classes utilitaires pour align-self ?
Quel est l'effet de self-start sur un élément ?
Comment self-end modifie-t-il l'alignement d'un élément ?
Quels sont les avantages de self-stretch ?
Conclusion
L’alignement d’éléments avec Tailwind CSS offre une grande flexibilité pour vos designs. Quelle technique d’alignement préférez-vous utiliser dans vos projets CSS ?
