క్షితిజ సమాంతర స్థలం ఫ్లెక్స్ లేదా గ్రిడ్ కంటైనర్‌లోని చైల్డ్ ఎలిమెంట్స్ వరుసగా అమర్చబడినప్పుడు వాటి మధ్య x-యాక్సిస్‌తో పాటు ఖాళీగా ఉంటుంది. నిలువు స్థలం ఫ్లెక్స్ లేదా గ్రిడ్ కంటైనర్‌లోని చైల్డ్ ఎలిమెంట్‌లను నిలువు వరుసలో అమర్చినప్పుడు వాటి మధ్య y-యాక్సిస్‌తో పాటు ఖాళీగా ఉంటుంది.
ఈ వ్యాసం ప్రదర్శిస్తుంది:
- టైల్‌విండ్‌లోని మూలకాల మధ్య క్షితిజసమాంతర స్థలాన్ని ఎలా జోడించాలి?
- టైల్‌విండ్‌లోని మూలకాల మధ్య నిలువు స్థలాన్ని ఎలా జోడించాలి?
టైల్‌విండ్‌లోని మూలకాల మధ్య క్షితిజసమాంతర స్థలాన్ని ఎలా జోడించాలి?
టైల్‌విండ్‌లోని మూలకాల మధ్య క్షితిజ సమాంతర స్థలాన్ని జోడించడానికి, “ space-x-
వాక్యనిర్మాణం
<మూలకం తరగతి = 'space-x-
ఇక్కడ, “x” అనేది “x-axis” లేదా “క్షితిజ సమాంతర స్థలం”ని సూచిస్తుంది. “
ఉదాహరణ: టైల్‌విండ్‌లోని మూలకాల మధ్య క్షితిజ సమాంతర స్థలాన్ని వర్తింపజేయడం
ఈ ఉదాహరణలో, మేము కొన్ని చైల్డ్ ఎలిమెంట్‌లతో కూడిన ఫ్లెక్స్ కంటైనర్‌ని కలిగి ఉన్నాము. మేము ఉపయోగిస్తాము ' స్పేస్-x-8 'యుటిలిటీ క్లాస్' తో ఇక్కడ, పేరెంట్ చైల్డ్ అవుట్‌పుట్ ఫ్లెక్స్ ఎలిమెంట్ మధ్య క్షితిజ సమాంతర స్థలం విజయవంతంగా వర్తించబడిందని ఎగువ అవుట్‌పుట్ సూచిస్తుంది. టైల్‌విండ్‌లోని మూలకాల మధ్య నిలువు ఖాళీని జోడించడానికి, “ space-y- వాక్యనిర్మాణం ఇక్కడ, “y” అనేది “y-axis” లేదా “vertical space”ని సూచిస్తుంది. “ ఉదాహరణ: టైల్‌విండ్‌లోని మూలకాల మధ్య నిలువు ఖాళీని వర్తింపజేయడం ఈ ఉదాహరణలో, మేము నిలువు వరుసలో కొన్ని చైల్డ్ ఎలిమెంట్‌లతో కూడిన ఫ్లెక్స్ కంటైనర్‌ను కలిగి ఉన్నాము. మేము 'ని ఉపయోగిస్తాము స్పేస్-y-5 'యుటిలిటీ క్లాస్' తో ఇక్కడ: అవుట్‌పుట్ ఫ్లెక్స్ మూలకాల మధ్య నిలువు ఖాళీ సమర్ధవంతంగా వర్తించబడింది. టైల్‌విండ్‌లోని మూలకాల మధ్య క్షితిజ సమాంతర మరియు నిలువు ఖాళీని జోడించడానికి, ' space-x-
< శరీరం >
< div తరగతి = 'ఫ్లెక్స్ స్పేస్-x-8 m-10 h-20 w-max' >
< div తరగతి = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div తరగతి = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div తరగతి = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div తరగతి = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div తరగతి = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div తరగతి = 'bg-teal-500 w-20 p-5' > 6 < / div >
< / div >
< / శరీరం >
టైల్‌విండ్‌లోని మూలకాల మధ్య నిలువు స్థలాన్ని ఎలా జోడించాలి?
< div తరగతి = 'ఫ్లెక్స్ ఫ్లెక్స్-కోల్ స్పేస్-y-5 m-10 టెక్స్ట్-సెంటర్' >
< div తరగతి = 'bg-teal-500 p-5' > 1 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 2 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 3 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 4 < / div >
< / div >
< / శరీరం >
ముగింపు