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