ఈ కథనం Tailwind CSSలో ఫ్లెక్స్ ఐటెమ్‌లను చుట్టకుండా నిరోధించే పద్ధతిని వివరిస్తుంది.
ఫ్లెక్స్ వస్తువులను టైల్‌విండ్‌లో చుట్టకుండా నిరోధించడం/ఆపివేయడం ఎలా?
ఫ్లెక్స్ ఐటెమ్‌లను టైల్‌విండ్‌లో చుట్టకుండా ఆపడానికి, HTML ఫైల్‌ను రూపొందించండి. అప్పుడు, ఫ్లెక్స్ ఐటెమ్‌లను చుట్టకుండా నిరోధించడానికి HTML ప్రోగ్రామ్‌లోని ఫ్లెక్స్ కంటైనర్‌తో “ఫ్లెక్స్-నౌరాప్” యుటిలిటీని ఉపయోగించండి. తరువాత, HTML వెబ్ పేజీని వీక్షించడం ద్వారా మార్పులను నిర్ధారించండి.
దీన్ని బాగా అర్థం చేసుకోవడానికి దిగువ పేర్కొన్న దశలను ప్రయత్నించండి:
దశ 1: HTML ప్రోగ్రామ్‌లో ఫ్లెక్స్ వస్తువులను చుట్టకుండా నిరోధించండి
HTML ప్రోగ్రామ్‌ను రూపొందించి, 'ని ఉపయోగించండి flex-nowrap ఫ్లెక్స్ వస్తువులను చుట్టకుండా నిరోధించడానికి కావలసిన ఫ్లెక్స్ కంటైనర్‌తో యుటిలిటీ:
< శరీరం >
< div తరగతి = 'ఫ్లెక్స్ ఫ్లెక్స్-నౌరాప్ హెచ్-40' >
< div తరగతి = 'ఆధారం-1/4 bg-red-500 m-1' > 1 < / div >
< div తరగతి = 'ఆధారం-1/3 bg-పసుపు-500 m-1' > 2 < / div >
< div తరగతి = 'ఆధారం-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / శరీరం >
ఇక్కడ:
- ' ఫ్లెక్స్ ” క్లాస్ ఫ్లెక్స్‌బాక్స్ లేఅవుట్‌ను ప్రారంభిస్తుంది మూలకం మరియు పిల్లల మూలకాలను అమర్చడానికి మరియు సమలేఖనం చేయడానికి అనుమతిస్తుంది.
- ' flex-nowrap ఫ్లెక్స్ ఐటెమ్‌లను బహుళ పంక్తులపై చుట్టకూడదని మరియు అన్ని ఫ్లెక్స్ ఐటమ్‌లను ఒకే లైన్‌లో ఉంచాలని క్లాస్ నిర్దేశిస్తుంది.
- ది ' ఆధారం-1/4 ',' ఆధారం-1/3 ', మరియు' ఆధారం-1/2 ” తరగతులు అంతర్గత సెట్
వెడల్పు వరుసగా 25%, 33.33% మరియు 50% వారి మాతృ మూలకాలకు.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
ఫ్లెక్స్ అంశాలు చుట్టబడలేదని నిర్ధారించుకోవడానికి, HTML వెబ్ పేజీని వీక్షించండి:
పై వెబ్ పేజీలో, ఫ్లెక్స్ అంశాలు ఒకే లైన్‌లో ఉన్నాయి మరియు చుట్టబడలేదు.
ముగింపు
టైల్‌విండ్‌లో ఫ్లెక్స్ ఐటెమ్‌లు చుట్టబడకుండా నిరోధించడానికి, HTML ప్రోగ్రామ్‌లో కావలసిన ఫ్లెక్స్ కంటైనర్‌తో “ఫ్లెక్స్-నౌరాప్” యుటిలిటీని ఉపయోగించండి. ఈ యుటిలిటీ ఫ్లెక్స్ వస్తువులను చుట్టకుండా నిరోధిస్తుంది. ధృవీకరణ కోసం, వెబ్ పేజీలో మార్పులను వీక్షించండి. ఈ కథనం Tailwind CSSలో ఫ్లెక్స్ ఐటెమ్‌లను చుట్టకుండా నిరోధించే పద్ధతిని వివరించింది.