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