Tailwind CSS propose divers ' 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. Ces classes utilitaires incluent 'items-start', 'items-center', 'items-end', 'items-baseline' et 'items-stretch'. De plus, les utilisateurs peuvent également utiliser les points d'arrêt et les requêtes multimédias sur l'utilitaire 'items-
Cet article présente la méthode d'application des points d'arrêt et des requêtes multimédias sur les utilitaires 'align-items' dans Tailwind.
Comment appliquer des points d'arrêt et des requêtes multimédias avec 'align-items' dans Tailwind ?
Pour appliquer les points d'arrêt et les requêtes multimédias souhaités sur les utilitaires 'justify-content' dans Tailwind, créez une structure HTML. Après cela, définissez la valeur spécifique au ' éléments-
Exemple
Dans cet exemple, nous allons créer un conteneur flexible avec la propriété 'items-start'. Nous utiliserons le ' Maryland 'point d'arrêt avec le' articles-centre « utilité et » lg 'point d'arrêt avec le' articles-fin ' utilité dans le ' Sortir Pour appliquer des points d'arrêt et des requêtes multimédias avec les utilitaires 'align-items' dans Tailwind, définissez la valeur souhaitée sur ' éléments-
< corps >
< div classe = 'flex items-start md:items-center lg:items-end justifier-autour 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:
La sortie ci-dessus montre que l'alignement vertical des éléments flexibles change à mesure que la taille de l'écran varie. Cela indique que les points d'arrêt et les requêtes multimédias spécifiés ont été effectivement appliqués avec l'utilitaire 'align-items'. Conclusion