L’alignement des éléments en CSS peut devenir complexe sans une bonne compréhension des axes.
Un mauvais alignement peut entraîner des designs désordonnés et peu professionnels, frustrant les utilisateurs.
Dans cet article, découvrez comment les classes Tailwind simplifient l’alignement des éléments en exploitant les axes principal et secondaire.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Avant de vous donner la classe utilitaire qu’on va utiliser, j’aimerais que vous compreniez le concept de l’axe principal et l’axe secondaire . Déjà pour l’axe principal, on a vu qu’on pouvait choisir celle-ci en dirigeant mes éléments le long de ce dernier. (flex-row, flex-col,…)
Maintenant pour l’axe secondaire, il s’agit juste de l’autre axe opposé à l’axe principal que vous avez choisi.
Donc si vous choisissez l’axe vertical comme axe principal forcément, l’axe secondaire sera l’axe horizontal et vice-versa.
À présent, pour aligner les éléments le long de l’axe secondaire, en CSS vous utilisez la propriété align-items . Dans Tailwind, on change tout cela par la classe items-{valeur} dont ses valeurs sont :
- items-start :place les éléments au début de l’axe secondaire (haut flex-row, gauche pour flex-col)
- items-end :positionne les éléments à la fin de l’axe secondaire (bas pour flex-row, droit pour flex-column)
- items-center :centrer les éléments le long de l’axe secondaire
- items-baseline :aligne les éléments sur leur ligne de base, ce qui permet d’obtenir une ligne d’alignement cohérente entre les textes
- items-stretch :étire tous les éléments pour occuper toute la hauteur du conteneur. Cette classe est généralement appliquée par défaut.
Si notre axe principal était l’axe horizontal, on aurait ceci :
CodePen : Pour une pratique de ce que nous venons de voir, je vous invite à cliquer sur le lien Codepen suivant :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
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
Qu'est-ce que l'axe principal en CSS ?
Comment fonctionne l'axe secondaire en CSS ?
Qu'est-ce que la classe 'items-start' dans Tailwind ?
Comment centrer les éléments avec Tailwind ?
Quelle est la fonction de 'items-stretch' dans Tailwind ?
Conclusion
En exploitant les classes Tailwind, vous pouvez facilement gérer l’alignement des éléments sur différents axes, améliorant ainsi la structure et l’esthétique de votre design. Quelles autres techniques trouvez-vous efficaces pour optimiser la mise en page avec Tailwind ?