టైల్‌విండ్‌లో 'అలైన్-ఐటెమ్స్'తో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఎలా దరఖాస్తు చేయాలి?

Tail Vind Lo Alain Aitems To Brek Payint Lu Mariyu Midiya Prasnalanu Ela Darakhastu Ceyali



టైల్‌విండ్ CSS వివిధ అందిస్తుంది ' సమలేఖనం-అంశాలు కంటైనర్ యొక్క క్రాస్-యాక్సిస్ వెంట ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌ల స్థానాన్ని నియంత్రించడానికి యుటిలిటీలు. ఈ యుటిలిటీ క్లాస్‌లలో 'ఐటెమ్స్-స్టార్ట్', 'ఐటెమ్స్-సెంటర్', 'ఐటెమ్స్-ఎండ్', 'ఐటెమ్స్-బేస్‌లైన్' మరియు 'ఐటెమ్స్-స్ట్రెచ్' ఉన్నాయి. అంతేకాకుండా, వినియోగదారులు విభిన్న స్క్రీన్ పరిమాణాలలో కంటైనర్ యొక్క క్రాస్-యాక్సిస్‌తో పాటు ఫ్లెక్స్ లేదా గ్రిడ్ ఐటెమ్ యొక్క స్థానాన్ని మార్చడానికి 'ఐటెమ్స్-' యుటిలిటీపై బ్రేక్ పాయింట్‌లు మరియు మీడియా ప్రశ్నలను కూడా ఉపయోగించుకోవచ్చు.

ఈ కథనం టైల్‌విండ్‌లోని “అలైన్-ఐటెమ్స్” యుటిలిటీలపై బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తించే పద్ధతిని ప్రదర్శిస్తుంది.







టైల్‌విండ్‌లో 'అలైన్-ఐటెమ్స్'తో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఎలా దరఖాస్తు చేయాలి?

టైల్‌విండ్‌లోని “జస్టిఫై-కంటెంట్” యుటిలిటీలపై కావలసిన బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి, HTML నిర్మాణాన్ని సృష్టించండి. ఆ తర్వాత, నిర్దిష్ట విలువను నిర్వచించండి ' అంశాలు-<విలువ> 'ని ఉపయోగించి వివిధ స్క్రీన్ పరిమాణాల కోసం ప్రయోజనం' md 'లేదా' lg ” బ్రేక్ పాయింట్స్. చివరగా, వెరిఫికేషన్ కోసం వెబ్ పేజీ స్క్రీన్ పరిమాణాన్ని మార్చండి.



ఉదాహరణ



ఈ ఉదాహరణలో, మేము 'ఐటెమ్స్-స్టార్ట్' ప్రాపర్టీతో ఫ్లెక్స్ కంటైనర్‌ను సృష్టిస్తాము. మేము ఉపయోగిస్తాము ' md 'బ్రేక్‌పాయింట్‌తో' అంశాలు-కేంద్రం 'యుటిలిటీ మరియు' lg 'బ్రేక్‌పాయింట్‌తో' అంశాలు-ముగింపు 'ఉపయోగం'

మీడియం మరియు పెద్ద స్క్రీన్ పరిమాణంలో దాని ఐటెమ్‌ల నిలువు అమరికను మార్చడానికి మూలకం:





< శరీరం >

< div తరగతి = 'flex items-start md:items-center lg:items-end 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 >

శరీరం >


ఇక్కడ:

    • ' అంశాలు-ప్రారంభం ” క్లాస్ ఫ్లెక్స్ ఐటెమ్‌లను కంటైనర్ మొదట్లో నిలువుగా సమలేఖనం చేస్తుంది.
    • ' md:వస్తువులు-కేంద్రం ” క్లాస్ ఫ్లెక్స్ ఐటెమ్‌లను మీడియం స్క్రీన్ పరిమాణంలో కంటైనర్ మధ్యలో నిలువుగా సమలేఖనం చేస్తుంది.
    • ' lg:items-end ” క్లాస్ ఫ్లెక్స్ ఐటెమ్‌లను పెద్ద స్క్రీన్ పరిమాణంలో కంటైనర్ చివర వరకు నిలువుగా సమలేఖనం చేస్తుంది.

అవుట్‌పుట్




స్క్రీన్ పరిమాణం మారుతున్నందున ఫ్లెక్స్ ఐటెమ్‌ల నిలువు అమరిక మారుతున్నట్లు పై అవుట్‌పుట్ చూపిస్తుంది. పేర్కొన్న బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలు “అలైన్-ఐటెమ్స్” యుటిలిటీతో సమర్థవంతంగా వర్తింపజేయబడిందని ఇది సూచిస్తుంది.

ముగింపు

టైల్‌విండ్‌లో 'అలైన్-ఐటెమ్స్' యుటిలిటీలతో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి, కావలసిన విలువను ''కి నిర్వచించండి అంశాలు-<విలువ> 'ని ఉపయోగించడం ద్వారా వివిధ స్క్రీన్ పరిమాణాల కోసం యుటిలిటీ' md 'లేదా' lg ” బ్రేక్ పాయింట్స్. ధృవీకరణ కోసం, వెబ్ పేజీ స్క్రీన్ పరిమాణాన్ని మార్చండి మరియు మార్పులను నిర్ధారించుకోండి. ఈ కథనం టైల్‌విండ్‌లోని “అలైన్-ఐటెమ్స్” యుటిలిటీలపై నిర్దిష్ట బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి ఉదాహరణను వివరించింది.