டெயில்விண்ட் CSS இல், ' இடையே இடைவெளி ஃப்ளெக்ஸ் அல்லது கிரிட் கொள்கலன்களின் குழந்தை கூறுகளுக்கு இடையே உள்ள இடைவெளியைக் கட்டுப்படுத்த பயன்பாடுகள் பயன்படுத்தப்படுகின்றன. இது குழந்தை உறுப்புகளுக்கு இடையில் கிடைமட்ட மற்றும் செங்குத்து இடைவெளியைப் பயன்படுத்துவதற்கு 'space-x-
இந்த வழிகாட்டி டெயில்விண்டில் எதிர்மறை இட மதிப்பைப் பயன்படுத்தும் முறையை எடுத்துக்காட்டும்.
டெயில்விண்டில் எதிர்மறை இட மதிப்பை எவ்வாறு பயன்படுத்துவது?
டெயில்விண்டில் எதிர்மறை இட மதிப்பைப் பயன்படுத்த, முதலில், ஒரு HTML கட்டமைப்பை உருவாக்கவும். பின்னர், கோடு பயன்படுத்தவும் ' – 'இடையிலான இடைவெளி' பயன்பாட்டு வகுப்புகளுடன் எதிர்மறை மதிப்புக்கு மாற்றவும். ' -space-x-
அதை நன்றாகப் புரிந்துகொள்ள கீழே உள்ள உதாரணங்களைப் பார்ப்போம்.
எடுத்துக்காட்டு 1: உறுப்புகளுக்கு இடையில் எதிர்மறையான கிடைமட்ட இடைவெளியைப் பயன்படுத்தவும்
இந்த எடுத்துக்காட்டில், வரிசையாக சில குழந்தை கூறுகள் கொண்ட ஃப்ளெக்ஸ் கொள்கலன் உள்ளது. நாங்கள் பயன்படுத்துவோம் ' -space-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 >
உடல் >
இங்கே, பெற்றோர்
-
- ' நெகிழ்வு 'வகுப்பு ஒரு நெகிழ்வான அமைப்பை உருவாக்குகிறது.
- ' -space-x-8 ” வகுப்பு ஒரு கொள்கலனுக்குள் ஃப்ளெக்ஸ் கூறுகளுக்கு இடையே எதிர்மறையான கிடைமட்ட இடைவெளியின் 8 அலகுகளைச் சேர்க்கிறது.
- ' மீ-10 ” வகுப்பானது கொள்கலனின் அனைத்துப் பக்கங்களிலும் 10 அலகுகளின் விளிம்பைச் சேர்க்கிறது.
- ' h-20 ” வகுப்பு கொள்கலனின் உயரத்தை 20 அலகுகளாக அமைக்கிறது.
- ' w-அதிகபட்சம் ” வகுப்பு, கொள்கலனின் அகலத்தை அதன் அதிகபட்ச உள்ளடக்க அகலத்திற்கு அமைக்கிறது.
குழந்தை
-
- ' bg-teal-500 'வகுப்பு நெகிழ்வு கூறுகளின் பின்னணியை டீல் செய்ய அமைக்கிறது.
- ' w-20 ” வகுப்பு ஒவ்வொரு ஃப்ளெக்ஸ் பொருளின் அகலத்தையும் 20 அலகுகளாக அமைக்கிறது.
- ' ப-5 ” வகுப்பு ஒவ்வொரு ஃப்ளெக்ஸ் பொருளின் அனைத்து பக்கங்களிலும் 5 யூனிட் திணிப்பு சேர்க்கிறது.
- ' எல்லை-2 ” வகுப்பு கொள்கலனின் எல்லை அகலத்தை 2 அலகுகளாக அமைக்கிறது.
- ' பார்டர்-டீல்-800 ” வகுப்பானது எல்லைக்கு டீல் நிறத்தைப் பயன்படுத்துகிறது.
வெளியீடு
மேலே உள்ள வெளியீடு நெகிழ்வு கூறுகள் ஒன்றுடன் ஒன்று இருப்பதைக் காட்டுகிறது. எதிர்மறை கிடைமட்ட இட மதிப்பு வெற்றிகரமாக பயன்படுத்தப்பட்டதை இது குறிக்கிறது.
எடுத்துக்காட்டு 2: உறுப்புகளுக்கு இடையே எதிர்மறையான செங்குத்து இடைவெளியைப் பயன்படுத்தவும்
இந்த எடுத்துக்காட்டில், ஒரு நெடுவரிசையில் சில குழந்தை கூறுகள் கொண்ட ஃப்ளெக்ஸ் கொள்கலன் உள்ளது. நாங்கள் பயன்படுத்துவோம் ' -space-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 'வகுப்பு ஃப்ளெக்ஸ் உருப்படிகளை செங்குத்து திசையில் சீரமைக்கிறது.
- ' -ஸ்பேஸ்-ஒய்-5 ” வகுப்பு ஒரு கொள்கலனில் உள்ள நெகிழ்வு கூறுகளுக்கு இடையே 7 அலகுகள் எதிர்மறை செங்குத்து இடைவெளியை சேர்க்கிறது.
- ' மீ-10 ” வகுப்பானது கொள்கலனின் அனைத்துப் பக்கங்களிலும் 10 அலகுகளின் விளிம்பைச் சேர்க்கிறது.
- ' உரை மையம் ” வகுப்பானது கொள்கலனின் உரையை மையத்தில் சீரமைக்கிறது.
வெளியீடு
நெகிழ்வு கூறுகள் ஒன்றுடன் ஒன்று இருப்பதைக் காணலாம். எதிர்மறை செங்குத்து இட மதிப்பு வெற்றிகரமாக பயன்படுத்தப்பட்டதை இது குறிக்கிறது.
முடிவுரை
டெயில்விண்டில் எதிர்மறை இட மதிப்பைப் பயன்படுத்த, ' -space-x-