Tailwind CSS pakub erinevaid joondada-üksused ” utiliidid painduvate ja ruudustikuelementide asukoha reguleerimiseks piki konteineri risttelge. Nende utiliidiklasside hulka kuuluvad 'üksuste algus', 'üksuste keskus', 'esemete lõpp', 'üksused-alustase' ja 'esemed-venitus'. Lisaks saavad kasutajad kasutada ka utiliidi „Kirjed-
See artikkel tutvustab murdepunktide ja meediumipäringute rakendamise meetodit Tailwindi utiliitide joondamisel.
Kuidas rakendada Tailwindis katkestuspunkte ja meediapäringuid üksuste joondamisega?
Soovitud katkestuspunktide ja meediumipäringute rakendamiseks Tailwindi „õigusta sisu” utiliitidele looge HTML-struktuur. Pärast seda määrake konkreetne väärtus ' üksused-
Näide
Selles näites loome paindliku konteineri atribuudiga „ITEMs-start”. Me kasutame ' md ' murdepunkt koos ' esemete keskus ' utiliit ja ' lg ' murdepunkt koos ' esemete lõpp ' utiliit jaotises ' Väljund Katkestuspunktide ja meediumipäringute rakendamiseks Tailwindi utiliitidega „joonda üksused”, määrake soovitud väärtus väärtusele „ üksused-
< keha >
< div klass = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div klass = 'bg-pink-600 py-4 w-40' > 1 div >
< div klass = 'bg-pink-600 py-12 w-40' > 2 div >
< div klass = 'bg-pink-600 py-8 w-40' > 3 div >
div >
keha >
Siin:
Ülaltoodud väljund näitab, et painduvate elementide vertikaalne joondus muutub ekraani suuruse muutudes. See näitab, et määratud katkestuspunktid ja meediumipäringud on utiliidi „align-items” abil tõhusalt rakendatud. Järeldus