Tailwind CSS offre vari ' align-elementi ” utilità per controllare la posizione degli elementi flessibili e della griglia lungo l'asse trasversale del contenitore. Queste classi di utilità includono 'items-start', 'items-center', 'items-end', 'items-baseline' e 'items-stretch'. Inoltre, gli utenti possono anche utilizzare i punti di interruzione e le query multimediali sull'utilità 'items-
Questo articolo dimostrerà il metodo di applicazione di punti di interruzione e query multimediali sulle utilità 'align-items' in Tailwind.
Come applicare punti di interruzione e query multimediali con 'align-items' in Tailwind?
Per applicare i punti di interruzione desiderati e le query multimediali sulle utilità 'justify-content' in Tailwind, crea una struttura HTML. Successivamente, definire il valore specifico per ' elementi-
Esempio
In questo esempio, creeremo un contenitore flessibile con la proprietà 'items-start'. Useremo il “ md ” punto di rottura con il “ item-center ” utilità e “ LG ” punto di rottura con il “ articoli-fine ” utilità in “ Produzione Per applicare punti di interruzione e media query con le utilità 'align-items' in Tailwind, definisci il valore desiderato in ' elementi-
< corpo >
< div classe = 'flex item-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div classe = 'bg-rosa-600 py-4 w-40' > 1 div >
< div classe = 'bg-rosa-600 py-12 w-40' > 2 div >
< div classe = 'bg-rosa-600 py-8 w-40' > 3 div >
div >
corpo >
Qui:
L'output precedente mostra che l'allineamento verticale degli elementi flessibili cambia al variare delle dimensioni dello schermo. Ciò indica che i punti di interruzione e le query multimediali specificati sono stati effettivamente applicati con l'utilità 'align-items'. Conclusione