தமிழ்

CSS Flexbox இன் 'gap' பண்பை பயன்படுத்தி திறமையான மற்றும் சீரான இடைவெளியை உருவாக்குங்கள். ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்கி உங்கள் வேலைத்திறனை மேம்படுத்துங்கள். இனி மார்ஜின் ஹேக்குகள் இல்லை!

CSS Flexbox Gap பண்பு: மார்ஜின்கள் இல்லாத இடைவெளி

வலைதள மேம்பாட்டு உலகில், சீரான மற்றும் பார்வைக்கு ஈர்க்கும் லேஅவுட்களை உருவாக்குவது மிக முக்கியம். பல ஆண்டுகளாக, டெவலப்பர்கள் எலிமெண்ட்களுக்கு இடையில் இடைவெளியை அடைய மார்ஜின்கள் மற்றும் பேடிங்குகளை பெரிதும் நம்பியிருந்தனர். இது பயனுள்ளதாக இருந்தாலும், இந்த அணுகுமுறை பெரும்பாலும் சிக்கலான கணக்கீடுகள், கணிக்க முடியாத நடத்தை, மற்றும் வெவ்வேறு திரை அளவுகளில் சீரான இடைவெளியைப் பராமரிப்பதில் சிரமங்களுக்கு வழிவகுத்தது. CSS Flexbox-ல் உள்ள gap பண்பு ஒரு கேம்-சேஞ்சர், இது இடைவெளியை எளிதாக்குகிறது மற்றும் லேஅவுட் கட்டுப்பாட்டை மேம்படுத்துகிறது.

CSS Flexbox Gap பண்பு என்றால் என்ன?

CSS Flexbox-ல் உள்ள gap பண்பு (முன்னர் row-gap மற்றும் column-gap என்று அழைக்கப்பட்டது) ஃப்ளெக்ஸ் ஐட்டங்களுக்கு இடையிலான இடத்தை வரையறுக்க ஒரு நேரடியான மற்றும் நேர்த்தியான வழியை வழங்குகிறது. இது மார்ஜின் ஹேக்குகளின் தேவையை நீக்குகிறது மற்றும் உங்கள் லேஅவுட்களில் சீரான இடைவெளியை உருவாக்குவதற்கு மிகவும் உள்ளுணர்வு மற்றும் பராமரிக்கக்கூடிய தீர்வை வழங்குகிறது. gap பண்பு ஒரு ஃப்ளெக்ஸ் கண்டெய்னருக்குள் உள்ள ஐட்டங்களுக்கு இடையில் இடத்தை சேர்ப்பதன் மூலம் செயல்படுகிறது, இது கண்டெய்னரின் ஒட்டுமொத்த அளவையோ அல்லது தனிப்பட்ட ஐட்டங்களின் அளவையோ பாதிக்காது.

சிண்டாக்ஸைப் புரிந்துகொள்வது

gap பண்பை ஒன்று அல்லது இரண்டு மதிப்புகளைப் பயன்படுத்தி குறிப்பிடலாம்:

மதிப்புகள் px, em, rem, %, vh, அல்லது vw போன்ற எந்தவொரு செல்லுபடியாகும் CSS நீள அலகாகவும் இருக்கலாம்.

அடிப்படை எடுத்துக்காட்டுகள்

gap பண்பை சில நடைமுறை எடுத்துக்காட்டுகளுடன் விளக்குவோம்.

எடுத்துக்காட்டு 1: சமமான வரிசை மற்றும் நெடுவரிசை இடைவெளிகள்

இந்த எடுத்துக்காட்டு gap பண்பிற்கு ஒரு மதிப்பைப் பயன்படுத்தி வரிசைகள் மற்றும் நெடுவரிசைகளுக்கு இடையில் சமமான இடைவெளியை உருவாக்குவது எப்படி என்பதைக் காட்டுகிறது.

.container {
  display: flex;
  flex-wrap: wrap; /* ஐட்டங்களை அடுத்த வரிக்கு மடக்க அனுமதிக்கவும் */
  gap: 16px; /* வரிசைகள் மற்றும் நெடுவரிசைகளுக்கு இடையில் 16px இடைவெளி */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
  box-sizing: border-box; /* சீரான அளவுக்காக முக்கியம் */
}

எடுத்துக்காட்டு 2: வெவ்வேறு வரிசை மற்றும் நெடுவரிசை இடைவெளிகள்

இந்த எடுத்துக்காட்டு gap பண்பிற்கு இரண்டு மதிப்புகளைப் பயன்படுத்தி வரிசைகள் மற்றும் நெடுவரிசைகளுக்கு வெவ்வேறு இடைவெளியை அமைப்பது எப்படி என்பதைக் காட்டுகிறது.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px; /* 8px வரிசை இடைவெளி, 24px நெடுவரிசை இடைவெளி */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

எடுத்துக்காட்டு 3: சார்பு அலகுகளைப் பயன்படுத்துதல்

em அல்லது rem போன்ற சார்பு அலகுகளைப் பயன்படுத்துவது, எழுத்துரு அளவிற்கு விகிதாசாரமாக இடைவெளியை அளவிட அனுமதிக்கிறது, இது ரெஸ்பான்சிவ் வடிவமைப்புகளுக்கு ஏற்றதாக அமைகிறது.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1em; /* எழுத்துரு அளவைப் பொறுத்த இடைவெளி */
  font-size: 16px; /* அடிப்படை எழுத்துரு அளவு */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

Gap பண்பைப் பயன்படுத்துவதன் நன்மைகள்

gap பண்பு பாரம்பரிய மார்ஜின் அடிப்படையிலான இடைவெளி நுட்பங்களை விட பல நன்மைகளை வழங்குகிறது:

உலாவி இணக்கத்தன்மை

gap பண்பு Chrome, Firefox, Safari, மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் சிறந்த ஆதரவைக் கொண்டுள்ளது. இது மொபைல் உலாவிகளிலும் ஆதரிக்கப்படுகிறது.

gap பண்பை ஆதரிக்காத பழைய உலாவிகளுக்கு, நீங்கள் ஒரு பாலிஃபில் அல்லது மார்ஜின்களைப் பயன்படுத்தி ஒரு ஃபால்பேக் தீர்வைப் பயன்படுத்தலாம். இருப்பினும், இது பொதுவாக பெரும்பாலான நவீன வலைதள மேம்பாட்டுத் திட்டங்களுக்குத் தேவையில்லை.

CSS கிரிட் லேஅவுட்டுடன் Gap-ஐப் பயன்படுத்துதல்

gap பண்பு Flexbox-க்கு மட்டும் அல்ல; இது CSS கிரிட் லேஅவுட்டுடனும் தடையின்றி செயல்படுகிறது. இது எளிய கிரிட் அடிப்படையிலான வடிவமைப்புகள் முதல் சிக்கலான பல நெடுவரிசை லேஅவுட்கள் வரை பரந்த அளவிலான லேஅவுட்களை உருவாக்குவதற்கான ஒரு பல்துறை கருவியாக அமைகிறது.

சிண்டாக்ஸ் Flexbox-உடன் பயன்படுத்தப்பட்டதைப் போன்றதே. இதோ ஒரு விரைவான எடுத்துக்காட்டு:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 சம அகல நெடுவரிசைகளை உருவாக்கவும் */
  gap: 16px; /* வரிசைகள் மற்றும் நெடுவரிசைகளுக்கு இடையில் 16px இடைவெளி */
}

.grid-item {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

நிஜ உலக பயன்பாட்டுச் சூழல்கள்

gap பண்பு பார்வைக்கு ஈர்க்கும் மற்றும் நன்கு கட்டமைக்கப்பட்ட லேஅவுட்களை உருவாக்க பல்வேறு நிஜ உலகச் சூழல்களில் பயன்படுத்தப்படலாம்.

சிறந்த நடைமுறைகள் மற்றும் குறிப்புகள்

gap பண்பை திறம்படப் பயன்படுத்துவதற்கான சில சிறந்த நடைமுறைகள் மற்றும் குறிப்புகள் இங்கே:

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

gap பண்பைப் பயன்படுத்தும் போது தவிர்க்க வேண்டிய சில பொதுவான தவறுகள் இங்கே:

அடிப்படை பயன்பாட்டிற்கு அப்பால்: மேம்பட்ட நுட்பங்கள்

நீங்கள் அடிப்படைகளில் வசதியாகிவிட்டால், gap பண்பைப் பயன்படுத்தி உங்கள் லேஅவுட்களை மேலும் மேம்படுத்த மேம்பட்ட நுட்பங்களை ஆராயலாம்.

1. மீடியா குவரிகளுடன் Gap-ஐ இணைத்தல்

திரை அளவைப் பொறுத்து gap மதிப்பை சரிசெய்ய நீங்கள் மீடியா குவரிகளைப் பயன்படுத்தலாம். இது வெவ்வேறு சாதனங்களுக்கு இடைவெளியை மேம்படுத்தவும் மேலும் ரெஸ்பான்சிவ் லேஅவுட்டை உருவாக்கவும் உங்களை அனுமதிக்கிறது.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* இயல்புநிலை இடைவெளி */
}

@media (max-width: 768px) {
  .container {
    gap: 8px; /* சிறிய திரைகளில் சிறிய இடைவெளி */
  }
}

2. டைனமிக் இடைவெளிகளுக்கு Calc() ஐப் பயன்படுத்துதல்

calc() செயல்பாடு உங்கள் CSS மதிப்புகளுக்குள் கணக்கீடுகளைச் செய்ய உங்களை அனுமதிக்கிறது. கண்டெய்னர் அகலம் அல்லது ஐட்டங்களின் எண்ணிக்கை போன்ற பிற காரணிகளைப் பொறுத்து சரிசெய்யப்படும் டைனமிக் இடைவெளிகளை உருவாக்க நீங்கள் calc() ஐப் பயன்படுத்தலாம்.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px + 1vw); /* வியூபோர்ட் அகலத்துடன் அதிகரிக்கும் இடைவெளி */
}

3. நெகட்டிவ் மார்ஜின்களுடன் ஒன்றின் மீது ஒன்று வரும் விளைவுகளை உருவாக்குதல் (கவனத்துடன் பயன்படுத்தவும்!)

gap பண்பு முதன்மையாக இடத்தை சேர்ப்பதற்காகப் பயன்படுத்தப்பட்டாலும், ஒன்றின் மீது ஒன்று வரும் விளைவுகளை உருவாக்க நீங்கள் அதை நெகட்டிவ் மார்ஜின்களுடன் இணைக்கலாம். இருப்பினும், இந்த அணுகுமுறை கவனத்துடன் பயன்படுத்தப்பட வேண்டும், ஏனெனில் இது சரியாக செயல்படுத்தப்படாவிட்டால் லேஅவுட் சிக்கல்களுக்கு வழிவகுக்கும்.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
  margin-top: -10px; /* ஒன்றின் மீது ஒன்று வரும் விளைவை உருவாக்க நெகட்டிவ் மார்ஜின் */
}

முக்கிய குறிப்பு: ஒன்றின் மீது ஒன்று வரும் எலிமெண்ட்கள் சில நேரங்களில் அணுகல்தன்மை சிக்கல்களை ஏற்படுத்தக்கூடும். ஒன்றின் மீது ஒன்று வரும் எந்தவொரு எலிமெண்ட்டும் மாற்றுத்திறனாளி பயனர்களுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும். முக்கியமான உள்ளடக்கம் எப்போதும் தெரியும் மற்றும் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்ய, எலிமெண்ட்களின் அடுக்கு வரிசையைக் (z-index) கட்டுப்படுத்த CSS ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

அணுகல்தன்மைப் பரிசீலனைகள்

gap பண்பை (அல்லது எந்தவொரு லேஅவுட் நுட்பத்தையும்) பயன்படுத்தும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது மிகவும் முக்கியம். உங்கள் லேஅவுட்கள் மாற்றுத்திறனாளிகள் உட்பட அனைத்து பயனர்களுக்கும் பயன்படுத்தக்கூடியதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிசெய்யவும்.

முடிவுரை

CSS Flexbox gap பண்பு சீரான மற்றும் பார்வைக்கு ஈர்க்கும் லேஅவுட்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். இது இடைவெளியை எளிதாக்குகிறது, ரெஸ்பான்சிவ்னஸை மேம்படுத்துகிறது, மற்றும் பராமரிப்பை மேம்படுத்துகிறது. gap பண்பின் சிண்டாக்ஸ், நன்மைகள், மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், உங்கள் பயனர்களின் தேவைகளைப் பூர்த்தி செய்யும் மிகவும் திறமையான மற்றும் பயனுள்ள லேஅவுட்களை நீங்கள் உருவாக்கலாம்.

gap பண்பை ஏற்றுக்கொண்டு மார்ஜின் ஹேக்குகளுக்கு விடைபெறுங்கள்! உங்கள் லேஅவுட்கள் உங்களுக்கு நன்றி தெரிவிக்கும்.