టైల్విండ్ CSS వివిధ అందిస్తుంది ' సమలేఖనం-అంశాలు కంటైనర్ యొక్క క్రాస్-యాక్సిస్ వెంట ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్ల స్థానాన్ని నియంత్రించడానికి యుటిలిటీలు. ఈ యుటిలిటీ క్లాస్లలో 'ఐటెమ్స్-స్టార్ట్', 'ఐటెమ్స్-సెంటర్', 'ఐటెమ్స్-ఎండ్', 'ఐటెమ్స్-బేస్లైన్' మరియు 'ఐటెమ్స్-స్ట్రెచ్' ఉన్నాయి. అంతేకాకుండా, వినియోగదారులు విభిన్న స్క్రీన్ పరిమాణాలలో కంటైనర్ యొక్క క్రాస్-యాక్సిస్తో పాటు ఫ్లెక్స్ లేదా గ్రిడ్ ఐటెమ్ యొక్క స్థానాన్ని మార్చడానికి 'ఐటెమ్స్-
ఈ కథనం టైల్విండ్లోని “అలైన్-ఐటెమ్స్” యుటిలిటీలపై బ్రేక్పాయింట్లు మరియు మీడియా ప్రశ్నలను వర్తించే పద్ధతిని ప్రదర్శిస్తుంది.
టైల్విండ్లో 'అలైన్-ఐటెమ్స్'తో బ్రేక్పాయింట్లు మరియు మీడియా ప్రశ్నలను ఎలా దరఖాస్తు చేయాలి?
టైల్విండ్లోని “జస్టిఫై-కంటెంట్” యుటిలిటీలపై కావలసిన బ్రేక్పాయింట్లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి, HTML నిర్మాణాన్ని సృష్టించండి. ఆ తర్వాత, నిర్దిష్ట విలువను నిర్వచించండి ' అంశాలు-<విలువ> 'ని ఉపయోగించి వివిధ స్క్రీన్ పరిమాణాల కోసం ప్రయోజనం' md 'లేదా' lg ” బ్రేక్ పాయింట్స్. చివరగా, వెరిఫికేషన్ కోసం వెబ్ పేజీ స్క్రీన్ పరిమాణాన్ని మార్చండి.
ఉదాహరణ
ఈ ఉదాహరణలో, మేము 'ఐటెమ్స్-స్టార్ట్' ప్రాపర్టీతో ఫ్లెక్స్ కంటైనర్ను సృష్టిస్తాము. మేము ఉపయోగిస్తాము ' 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 >
శరీరం >
ఇక్కడ:
స్క్రీన్ పరిమాణం మారుతున్నందున ఫ్లెక్స్ ఐటెమ్ల నిలువు అమరిక మారుతున్నట్లు పై అవుట్పుట్ చూపిస్తుంది. పేర్కొన్న బ్రేక్పాయింట్లు మరియు మీడియా ప్రశ్నలు “అలైన్-ఐటెమ్స్” యుటిలిటీతో సమర్థవంతంగా వర్తింపజేయబడిందని ఇది సూచిస్తుంది. ముగింపు