டெயில்விண்டில் உள்ள கூறுகளுக்கு இடையில் கிடைமட்ட மற்றும் செங்குத்து இடத்தை எவ்வாறு சேர்ப்பது?

Teyilvintil Ulla Kurukalukku Itaiyil Kitaimatta Marrum Cenkuttu Itattai Evvaru Cerppatu



டெயில்விண்ட் CSS வழங்குகிறது ' இடையே இடைவெளி 'ஃப்ளெக்ஸ் அல்லது கிரிட் கொள்கலனின் கூறுகளுக்கு இடையே உள்ள இடைவெளியைக் கட்டுப்படுத்தும் பயன்பாடுகள். இது 'space-x-', 'space-y-', 'space-x-reverse', 'space-y-reverse' போன்ற பல்வேறு வகுப்புகளைக் கொண்டுள்ளது. இந்த பயன்பாடுகள் கிடைமட்ட மற்றும் கொள்கலனில் உள்ள நெகிழ்வு அல்லது கட்டம் கூறுகளுக்கு இடையே செங்குத்து இடைவெளி.

கிடைமட்ட இடம் ஃப்ளெக்ஸ் அல்லது கிரிட் கொள்கலனின் குழந்தை உறுப்புகளுக்கு இடையே x- அச்சில் இருக்கும் இடைவெளி, அவை ஒரு வரிசையில் அமைக்கப்பட்டிருக்கும் போது. செங்குத்து இடம் ஒரு நெடுவரிசையில் வரிசைப்படுத்தப்பட்டிருக்கும் போது, ​​ஃப்ளெக்ஸ் அல்லது கிரிட் கொள்கலனின் குழந்தை உறுப்புகளுக்கு இடையே y-அச்சு வழியாக ஒரு இடைவெளி உள்ளது.

இந்த கட்டுரை நிரூபிக்கும்:







டெயில்விண்டில் உள்ள உறுப்புகளுக்கு இடையில் கிடைமட்ட இடத்தை எவ்வாறு சேர்ப்பது?

டெயில்விண்டில் உள்ள உறுப்புகளுக்கு இடையில் கிடைமட்ட இடைவெளியைச் சேர்க்க, ' space-x- HTML நிரலில் விரும்பிய உறுப்புடன் வகுப்பு பயன்படுத்தப்படுகிறது. இந்த வகுப்பு x அச்சில் உள்ள உறுப்புகளுக்கு இடையில் இடைவெளி சேர்க்கிறது.



தொடரியல்



<உறுப்பு வர்க்கம் = 'space-x- ...'>... < / உறுப்பு>

இங்கே, 'x' என்பது 'x-அச்சு' அல்லது 'கிடைமட்ட இடத்தை' குறிக்கிறது. “” ஐ “4”, “10” போன்ற சரியான மதிப்புடன் மாற்றுவதை உறுதிசெய்யவும்.





எடுத்துக்காட்டு: டெயில்விண்டில் உள்ள உறுப்புகளுக்கு இடையில் கிடைமட்ட இடைவெளியைப் பயன்படுத்துதல்

இந்த எடுத்துக்காட்டில், சில குழந்தை கூறுகள் கொண்ட ஒரு நெகிழ்வு கொள்கலன் உள்ளது. நாங்கள் பயன்படுத்துவோம் ' விண்வெளி-x-8 'பயன்பாட்டு வகுப்பு' உடன்

'உறுப்பு அதன் குழந்தை உறுப்புகளுக்கு இடையில் கிடைமட்ட இடைவெளியைச் சேர்க்க:



< உடல் >

< 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 >

< / உடல் >

இங்கே, பெற்றோர்

உறுப்பில்:

  • ' நெகிழ்வு 'வகுப்பு ஒரு நெகிழ்வான அமைப்பை உருவாக்குகிறது.
  • ' விண்வெளி-x-8 ” வகுப்பு ஒரு கொள்கலனுக்குள் நெகிழ்வு கூறுகளுக்கு இடையில் 8 அலகுகள் கிடைமட்ட இடைவெளியைச் சேர்க்கிறது.
  • ' மீ-10 ” வகுப்பானது கொள்கலனின் அனைத்துப் பக்கங்களிலும் 10 அலகுகளின் விளிம்பைச் சேர்க்கிறது.
  • ' h-20 ” வகுப்பு கொள்கலனின் உயரத்தை 20 அலகுகளாக அமைக்கிறது.
  • ' w-அதிகபட்சம் ” வகுப்பு, கொள்கலனின் அகலத்தை அதன் அதிகபட்ச உள்ளடக்க அகலத்திற்கு அமைக்கிறது.

குழந்தை

உறுப்புகளில்:

  • ' bg-teal-500 'வகுப்பு நெகிழ்வு கூறுகளின் பின்னணியை டீல் செய்ய அமைக்கிறது.
  • ' w-20 ” வகுப்பு ஒவ்வொரு ஃப்ளெக்ஸ் பொருளின் அகலத்தையும் 20 அலகுகளாக அமைக்கிறது.
  • ' ப-5 ” வகுப்பு ஒவ்வொரு ஃப்ளெக்ஸ் பொருளின் அனைத்து பக்கங்களிலும் 5 யூனிட் திணிப்பு சேர்க்கிறது.

வெளியீடு

ஃப்ளெக்ஸ் உறுப்புக்கு இடையே உள்ள கிடைமட்ட இடைவெளி வெற்றிகரமாக பயன்படுத்தப்பட்டதை மேலே உள்ள வெளியீடு குறிக்கிறது.

டெயில்விண்டில் உள்ள உறுப்புகளுக்கு இடையே செங்குத்து இடத்தை எவ்வாறு சேர்ப்பது?

டெயில்விண்டில் உள்ள உறுப்புகளுக்கு இடையே செங்குத்து இடைவெளியைச் சேர்க்க, ' space-y- HTML நிரலில் குறிப்பிட்ட உறுப்புடன் வகுப்பு பயன்படுத்தப்படுகிறது. இந்த வகுப்பு y அச்சில் உள்ள உறுப்புகளுக்கு இடையில் இடைவெளி சேர்க்கிறது.

தொடரியல்

<உறுப்பு வர்க்கம் = 'space-y- ...' >...< / உறுப்பு>

இங்கே, 'y' என்பது 'y-அச்சு' அல்லது 'செங்குத்து இடத்தை' குறிக்கிறது. '' ஐ '5', '12' போன்ற உண்மையான மதிப்புடன் மாற்றுவதை உறுதிசெய்யவும்.

எடுத்துக்காட்டு: டெயில்விண்டில் உள்ள உறுப்புகளுக்கு இடையே செங்குத்து இடைவெளியைப் பயன்படுத்துதல்

இந்த எடுத்துக்காட்டில், ஒரு நெடுவரிசையில் சில குழந்தை கூறுகள் கொண்ட ஃப்ளெக்ஸ் கொள்கலன் உள்ளது. நாங்கள் பயன்படுத்துவோம் ' விண்வெளி-y-5 'பயன்பாட்டு வகுப்பு' உடன்

'உறுப்பு அதன் குழந்தை உறுப்புகளுக்கு இடையே செங்குத்து இடைவெளி சேர்க்க:

< உடல் >

< div வர்க்கம் = 'flex flex-col space-y-5 m-10 text-center' >
< 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 >

< / உடல் >

இங்கே:

  • ' நெகிழ்வு 'வகுப்பு ஒரு நெகிழ்வான அமைப்பை உருவாக்குகிறது.
  • ' flex-col 'வகுப்பு நெகிழ்வான பொருட்களை செங்குத்து திசையில் (ஒரு நெடுவரிசையில்) சீரமைக்கிறது.
  • ' விண்வெளி-y-5 ” வகுப்பு ஒரு கொள்கலனில் உள்ள நெகிழ்வு கூறுகளுக்கு இடையே 5 அலகு செங்குத்து இடைவெளியை சேர்க்கிறது.
  • ' மீ-10 ” வகுப்பானது கொள்கலனின் அனைத்துப் பக்கங்களிலும் 10 அலகுகளின் விளிம்பைச் சேர்க்கிறது.
  • ' உரை மையம் ” வகுப்பானது கொள்கலனின் உரையை மையத்தில் சீரமைக்கிறது.

வெளியீடு

நெகிழ்வு கூறுகளுக்கு இடையே உள்ள செங்குத்து இடைவெளி திறமையாக பயன்படுத்தப்பட்டுள்ளது.

முடிவுரை

டெயில்விண்டில் உள்ள உறுப்புகளுக்கு இடையே கிடைமட்ட மற்றும் செங்குத்து இடைவெளியைச் சேர்க்க, ' space-x- 'மற்றும்' space-y- ” பயன்பாட்டு வகுப்புகள் முறையே HTML நிரலில் தேவையான கூறுகளுடன் பயன்படுத்தப்படுகின்றன. இந்த வகுப்புகள் பொதுவாக ஃப்ளெக்ஸ் மற்றும் கிரிட் கொள்கலன்களுடன் தங்கள் குழந்தை உறுப்புகளுக்கு இடையில் இடைவெளியைக் கட்டுப்படுத்தப் பயன்படுத்தப்படுகின்றன. டெயில்விண்டில் உள்ள உறுப்புகளுக்கு இடையில் கிடைமட்ட மற்றும் செங்குத்து இடைவெளியைப் பயன்படுத்தும் முறையை இந்தக் கட்டுரை எடுத்துக்காட்டுகிறது.