Tailwind CSS అందిస్తుంది ' సమలేఖనం-అంశాలు కంటైనర్ యొక్క క్రాస్-యాక్సిస్ వెంట ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌ల స్థానాన్ని నియంత్రించడానికి యుటిలిటీలు. ఇది 'ఐటెమ్స్-స్టార్ట్', 'ఐటెమ్స్-సెంటర్', 'ఐటెమ్స్-ఎండ్', 'ఐటెమ్స్-బేస్‌లైన్' మొదలైన వివిధ యుటిలిటీ క్లాస్‌లను కలిగి ఉంది. ఇంకా, వినియోగదారులు 'ఐటెమ్స్-
ఈ కథనం టైల్‌విండ్ CSSలో సమలేఖన అంశాలు” యుటిలిటీలపై హోవర్‌ని వర్తింపజేసే పద్ధతిని ఉదాహరణగా చూపుతుంది.
టైల్‌విండ్‌లోని “అలైన్-ఐటెమ్స్” యుటిలిటీలపై హోవర్‌ని ఎలా అప్లై చేయాలి?
టైల్‌విండ్‌లోని “అలైన్-ఐటెమ్స్” యుటిలిటీలపై హోవర్‌ను వర్తింపజేయడానికి, HTML స్ట్రక్చర్‌ను సృష్టించి, “ని జోడించండి హోవర్ 'కావలసిన వాటితో యుటిలిటీ క్లాస్' అంశాలు-<విలువ> కంటైనర్‌లో యుటిలిటీ. తర్వాత, HTML వెబ్ పేజీని తనిఖీ చేయండి మరియు మార్పులను ధృవీకరించడానికి పేర్కొన్న మూలకంపై మౌస్‌ని ఉంచండి.
వాక్యనిర్మాణం
< మూలకం తరగతి = 'హోవర్:అంశాలు-
ఉదాహరణ
ఈ ఉదాహరణలో, మేము 'ఐటెమ్స్-స్టార్ట్' ప్రాపర్టీతో ఫ్లెక్స్ కంటైనర్‌ను తయారు చేస్తాము. అప్పుడు, మేము 'ని ఉపయోగిస్తాము హోవర్:అంశాల-కేంద్రం 'లో తరగతి' అవుట్‌పుట్ టైల్‌విండ్‌లోని “అలైన్-ఐటెమ్స్” యుటిలిటీలపై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి, “ని ఉపయోగించండి హోవర్ 'ప్రత్యేకమైన' యుటిలిటీ క్లాస్ అంశాలు-<విలువ> ఫ్లెక్స్ లేదా గ్రిడ్ కంటైనర్‌లో యుటిలిటీ. ధృవీకరణ కోసం, వెబ్ పేజీలో పేర్కొన్న కంటైనర్‌పై మౌస్‌ని ఉంచండి. ఈ కథనం టైల్‌విండ్‌లోని “అలైన్-ఐటెమ్స్” యుటిలిటీలపై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి ఉదాహరణలను ప్రదర్శించింది.
< శరీరం >
< div తరగతి = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div తరగతి = 'bg-pink-600 py-4 w-40' > 1 div >
< div తరగతి = 'bg-pink-600 py-12 w-40' > 2 div >
< div తరగతి = 'bg-pink-600 py-8 w-40' > 3 div >
div >
శరీరం >
ఇక్కడ:
పై వెబ్ పేజీ నుండి, హోవర్‌లో కంటైనర్ యొక్క క్రాస్-యాక్సిస్‌తో పాటు ఫ్లెక్స్ ఐటెమ్‌ల అమరిక మారుతున్నట్లు గమనించవచ్చు. ముగింపు