Tailwind CSS fournit ' aligner les éléments ” utilitaires pour contrôler la position des éléments flexibles et de la grille le long de l'axe transversal du conteneur. Il a diverses classes utilitaires, telles que 'items-start', 'items-center', 'items-end', 'items-baseline', etc. De plus, les utilisateurs peuvent également utiliser la propriété hover avec 'items-
Cet article illustrera la méthode d'application des utilitaires 'hover on align-items' dans Tailwind CSS.
Comment appliquer le survol sur les utilitaires 'align-items' dans Tailwind ?
Pour appliquer le survol sur les utilitaires 'align-items' dans Tailwind, créez une structure HTML et ajoutez le ' flotter « Classe utilitaire avec la valeur souhaitée » éléments-
Syntaxe
< élément classe = 'hover:items-
Remplacez
Exemple
Dans cet exemple, nous allons créer un conteneur flexible avec la propriété 'items-start'. Ensuite, nous utiliserons le ' survol:items-center 'classe dans le' Sortir Pour appliquer l'effet de survol sur les utilitaires 'align-items' dans Tailwind, utilisez le ' flotter « classe utilitaire avec le particulier » éléments-
< corps >
< div classe = 'flex items-start hover:items-center justifie-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div classe = 'bg-rose-600 py-4 w-40' > 1 div >
< div classe = 'bg-rose-600 py-12 w-40' > 2 div >
< div classe = 'bg-rose-600 py-8 w-40' > 3 div >
div >
corps >
Ici:
À partir de la page Web ci-dessus, on peut observer que l'alignement des éléments flexibles change le long de l'axe transversal du conteneur lors du survol. Conclusion