Kako primijeniti lebdenje na uslužnim programima 'poravnaj stavke' u Tailwindu?

Kako Primijeniti Lebdenje Na Usluznim Programima Poravnaj Stavke U Tailwindu



Tailwind CSS pruža ' align-items ” pomoćne programe za kontrolu položaja savitljivih i rešetkastih stavki duž poprečne osi spremnika. Ima različite uslužne klase, kao što su “items-start”, “items-center”, “items-end”, “items-baseline”, itd. Nadalje, korisnici također mogu koristiti svojstvo lebdenja s “items- ” uslužne klase za promjenu položaja savitljive ili rešetkaste stavke duž poprečne osi spremnika pri lebdenju.

Ovaj će članak ilustrirati metodu primjene uslužnih programa lebdenja na poravnanje stavki u Tailwind CSS-u.







Kako primijeniti lebdenje na uslužnim programima 'poravnaj stavke' u Tailwindu?

Za primjenu lebdenja na uslužnim programima za 'poravnavanje stavki' u Tailwindu, izradite HTML strukturu i dodajte ' lebdjeti ' klasa korisnosti sa željenim ' stavke- ” uslužni program u spremniku. Zatim pogledajte HTML web-stranicu i zadržite pokazivač miša na navedenom elementu kako biste provjerili promjene.



Sintaksa



< element razreda = 'hover:items- ...' > ... element >


Zamijenite jednom od sljedećih opcija: “start”, “center”, “end”, “baseline” ili “stretch”.





Primjer

U ovom primjeru napravit ćemo fleksibilni spremnik sa svojstvom 'items-start'. Zatim ćemo koristiti ' hover:items-center ' razred u '

” element. Ovo će poravnati fleksibilne stavke sa središtem poprečne osi spremnika dok lebdite:



< tijelo >

< div razreda = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div razreda = 'bg-pink-600 py-4 w-40' > 1 div >
< div razreda = 'bg-ružičasta-600 py-12 w-40' > 2 div >
< div razreda = 'bg-ružičasta-600 py-8 w-40' > 3 div >
div >

tijelo >


Ovdje:

    • stavke-poč ” klasa vertikalno poravnava flex stavke s početkom spremnika.
    • hover:items-center ” klasa okomito poravnava fleksibilne stavke prema središtu spremnika kada mišem prijeđete iznad njih.

Izlaz


S gornje web stranice može se primijetiti da se poravnanje fleksibilnih stavki mijenja duž poprečne osi spremnika dok lebdite.

Zaključak

Za primjenu efekta lebdenja na uslužnim programima za 'poravnanje stavki' u Tailwindu, upotrijebite ' lebdjeti ' klasa korisnosti s posebnim ' stavke- ” uslužni program u spremniku flex ili grid. Za provjeru prijeđite mišem iznad navedenog spremnika na web stranici. Ovaj članak demonstrira primjere primjene efekta lebdenja na uslužnim programima za 'poravnavanje stavki' u Tailwindu.