CSS Flexbox நிபுணத்துவம்: மேம்பட்ட லேஅவுட் நுட்பங்கள்

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

அடிப்படைகளைப் புரிந்துகொள்ளுதல்: ஒரு விரைவான மீள்பார்வை

மேம்பட்ட நுட்பங்களுக்குள் நுழைவதற்கு முன், அடிப்படைக் கொள்கைகளைப் பற்றிய நமது புரிதலைப் புதுப்பித்துக் கொள்வோம். Flexbox என்பது ஒரு-பரிமாண லேஅவுட் மாதிரி. இது முதன்மையாக ஒரு வரிசை அல்லது நெடுவரிசையில் பொருட்களை ஒழுங்கமைக்கப் பயன்படுகிறது. இதன் முக்கிய கருத்துக்கள் பின்வருமாறு:

Flex Container: `display: flex;` அல்லது `display: inline-flex;` பயன்படுத்தப்பட்ட பெற்றோர் உறுப்பு (parent element).
Flex Items: flex container-ன் குழந்தை உறுப்புகள் (child elements).
Main Axis: flex பொருட்கள் அடுக்கப்படும் முதன்மை அச்சு. இயல்பாக, இது கிடைமட்ட அச்சு (வரிசை).
Cross Axis: முதன்மை அச்சிற்கு செங்குத்தான அச்சு. இயல்பாக, இது செங்குத்து அச்சு (நெடுவரிசை).
முக்கிய பண்புகள் (Key Properties):
- `flex-direction`: முதன்மை அச்சை வரையறுக்கிறது. மதிப்புகள் `row`, `row-reverse`, `column`, மற்றும் `column-reverse` ஆகியவற்றை உள்ளடக்கியது.
- `justify-content`: முதன்மை அச்சில் பொருட்களை சீரமைக்கிறது. மதிப்புகள் `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, மற்றும் `space-evenly` ஆகியவற்றை உள்ளடக்கியது.
- `align-items`: cross அச்சில் பொருட்களை சீரமைக்கிறது. மதிப்புகள் `flex-start`, `flex-end`, `center`, `baseline`, மற்றும் `stretch` ஆகியவற்றை உள்ளடக்கியது.
- `align-content`: flex பொருட்களின் பல வரிகளை சீரமைக்கிறது (`flex-wrap` ஆனது `wrap` அல்லது `wrap-reverse` என அமைக்கப்பட்டிருக்கும் போது மட்டுமே பொருந்தும்). மதிப்புகள் `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, மற்றும் `stretch` ஆகியவற்றை உள்ளடக்கியது.
- `flex-wrap`: flex பொருட்கள் அடுத்த வரிக்கு மடிக்க வேண்டுமா என்பதைக் குறிப்பிடுகிறது. மதிப்புகள் `nowrap`, `wrap`, மற்றும் `wrap-reverse` ஆகியவற்றை உள்ளடக்கியது.

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

மேம்பட்ட Flexbox பண்புகள் மற்றும் நுட்பங்கள்

1. `flex` சுருக்கெழுத்து (Shorthand)

`flex` சுருக்கெழுத்துப் பண்பு `flex-grow`, `flex-shrink`, மற்றும் `flex-basis` ஆகியவற்றை ஒரே அறிவிப்பில் இணைக்கிறது. இது உங்கள் CSS-ஐ கணிசமாக எளிதாக்குகிறது மற்றும் வாசிப்புத்தன்மையை மேம்படுத்துகிறது. flex பொருட்களின் நெகிழ்வுத்தன்மையைக் கட்டுப்படுத்த இது மிகவும் சுருக்கமான வழியாகும்.

தொடரியல் (Syntax): `flex: flex-grow flex-shrink flex-basis;`

எடுத்துக்காட்டுகள்:

`flex: 1;` (`flex: 1 1 0%;` க்கு சமம்): பொருள் கிடைக்கும் இடத்தை நிரப்ப வளரும், தேவைப்பட்டால் சுருங்கும், மற்றும் ஆரம்ப அளவு 0 ஆக இருக்கும்.
`flex: 0 1 auto;`: பொருள் வளராது, தேவைக்கேற்ப சுருங்கும், மற்றும் அதன் உள்ளடக்கத்தின் அளவை எடுக்கும்.
`flex: 2 0 200px;`: பொருள் மற்ற பொருட்களை விட இரண்டு மடங்கு வேகமாக வளரும், சுருங்காது, மற்றும் குறைந்தபட்சம் 200px அகலம் கொண்டிருக்கும்.

சுருக்கெழுத்தைப் பயன்படுத்துவது உங்கள் குறியீட்டை கணிசமாக எளிதாக்குகிறது. `flex-grow`, `flex-shrink`, மற்றும் `flex-basis` ஆகியவற்றிற்கு தனித்தனி வரிகளை எழுதுவதற்குப் பதிலாக, ஒரே அறிவிப்பில் மூன்று மதிப்புகளையும் நீங்கள் குறிப்பிடலாம்.

2. `flex-basis` உடன் டைனமிக் ஐட்டம் அளவிடுதல்

`flex-basis` ஆனது, கிடைக்கும் இடம் விநியோகிக்கப்படுவதற்கு முன்பு ஒரு flex பொருளின் ஆரம்ப அளவை தீர்மானிக்கிறது. இது `width` அல்லது `height` போலவே செயல்படுகிறது, ஆனால் `flex-grow` மற்றும் `flex-shrink` உடன் ஒரு தனித்துவமான உறவைக் கொண்டுள்ளது. `flex-basis` அமைக்கப்படும் போது, மற்றும் கிடைக்கும் இடம் இருக்கும் போது, பொருட்கள் `flex-basis` அளவிலிருந்து தொடங்கி அவற்றின் `flex-grow` மற்றும் `flex-shrink` மதிப்புகளின் அடிப்படையில் வளர்கின்றன அல்லது சுருங்குகின்றன.

முக்கிய புள்ளிகள்:

இயல்பாக, `flex-basis` என்பது `auto` ஆகும், அதாவது பொருள் அதன் உள்ளடக்கத்தின் அளவைப் பயன்படுத்தும்.
`flex-basis`-ஐ ஒரு குறிப்பிட்ட மதிப்பிற்கு (எ.கா., `100px`, `20%`) அமைப்பது பொருளின் உள்ளடக்க அளவை மீறுகிறது.
`flex-basis` ஆனது `0` என அமைக்கப்படும் போது, பொருளின் ஆரம்ப அளவு பூஜ்ஜியமாக இருக்கும், மற்றும் பொருட்கள் அவற்றின் `flex-grow` மதிப்புகளின் அடிப்படையில் மட்டுமே இடத்தை விநியோகிக்கும்.

பயன்பாட்டு வழக்கு: நிலையான குறைந்தபட்ச அகலங்களுடன் ரெஸ்பான்சிவ் கார்டுகளை உருவாக்குதல். தயாரிப்புக் காட்சிகளுக்கான ஒரு கார்டு லேஅவுட்டை கற்பனை செய்து பாருங்கள். `flex-basis` ஐப் பயன்படுத்தி குறைந்தபட்ச அகலத்தை நீங்கள் அமைக்கலாம் மற்றும் `flex-grow` மற்றும் `flex-shrink` ஐப் பயன்படுத்தி கொள்கலனை நிரப்ப பொருட்களை அனுமதிக்கலாம். இது சீனா, ஜெர்மனி, அல்லது ஆஸ்திரேலியா போன்ற நாடுகளில் செயல்படும் இ-காமர்ஸ் வலைத்தளங்களுக்கு ஒரு பொதுவான தேவையாக இருக்கும்.

.card {
  flex: 1 1 250px; /* இதற்கு சமம்: flex-grow: 1; flex-shrink: 1; flex-basis: 250px; */
  margin: 10px;
  border: 1px solid #ccc;
  padding: 20px;
}

3. `order` மற்றும் `align-self` உடன் வரிசை மற்றும் நிலைப்படுத்தல்

`order` ஆனது HTML-இல் உள்ள மூல வரிசையிலிருந்து சுயாதீனமாக flex பொருட்களின் காட்சி வரிசையைக் கட்டுப்படுத்த உங்களை அனுமதிக்கிறது. இது ரெஸ்பான்சிவ் வடிவமைப்புகள் மற்றும் அணுகல்தன்மைக்கு நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும். இயல்புநிலை வரிசை `0` ஆகும். பொருட்களை மறுவரிசைப்படுத்த நீங்கள் நேர்மறை அல்லது எதிர்மறை முழு எண்களைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக, மொபைலுக்கு உள்ளடக்கத்தை இறுதியிலும், டெஸ்க்டாப்பிற்கு தொடக்கத்திலும் வைப்பது. இது வெவ்வேறு உலகப் பகுதிகளில் உள்ள பயனர்களின் மாறுபட்ட தேவைகளை நிவர்த்தி செய்வதற்கான ஒரு முக்கிய அம்சமாகும். பிரான்ஸ் மற்றும் ஐக்கிய இராச்சியத்தில் உள்ள பயனர்களால் அணுகப்படும் ஒரு வலைத்தளத்திற்கு மொபைல் மற்றும் டெஸ்க்டாப் காட்சிகளுக்காக லோகோ மற்றும் வழிசெலுத்தலின் வரிசையை மாற்றுவது ஒரு எடுத்துக்காட்டு.

`align-self` ஆனது தனிப்பட்ட flex பொருட்களுக்கான `align-items` பண்பை மீறுகிறது. இது செங்குத்து சீரமைப்பு மீது நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது. இது `align-items` போன்ற அதே மதிப்புகளை ஏற்றுக்கொள்கிறது.

எடுத்துக்காட்டு:


<div class="container">
  <div class="item" style="order: 2;">Item 1</div>
  <div class="item" style="order: 1;">Item 2</div>
  <div class="item" style="align-self: flex-end;">Item 3</div>
</div>

இந்த எடுத்துக்காட்டில், "Item 2" ஆனது "Item 1"-க்கு முன்பாக தோன்றும், மற்றும் "Item 3" ஆனது கொள்கலனின் அடிப்பகுதியில் சீரமைக்கப்படும் (ஒரு நெடுவரிசை திசை அல்லது கிடைமட்ட முதன்மை அச்சைக் கருதி).

4. உள்ளடக்கத்தை மையப்படுத்துதல் – புனிதக் கிண்ணம் (The Holy Grail)

Flexbox கிடைமட்டமாகவும் செங்குத்தாகவும் உள்ளடக்கத்தை மையப்படுத்துவதில் சிறந்து விளங்குகிறது. இது எளிய லேண்டிங் பக்கங்கள் முதல் சிக்கலான டாஷ்போர்டுகள் வரை பல்வேறு வலைப் பயன்பாடுகளில் ஒரு பொதுவான தேவையாகும். தீர்வு உங்கள் லேஅவுட் மற்றும் விரும்பிய நடத்தையைப் பொறுத்தது. வலை மேம்பாடு ஒரு உலகளாவிய செயல்பாடு என்பதை நினைவில் கொள்ளுங்கள்; உங்கள் மையப்படுத்தும் நுட்பங்கள் கனடா, தென் கொரியா, அல்லது நைஜீரியா போன்ற நாடுகளில் பயன்படுத்தப்படும் பல்வேறு தளங்கள் மற்றும் சாதனங்களில் தடையின்றி செயல்பட வேண்டும்.

அடிப்படை மையப்படுத்தல்:


.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* அல்லது விரும்பிய உயரம் */
}

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

பல பொருட்களை மையப்படுத்துதல்:

பல பொருட்களை மையப்படுத்தும் போது, நீங்கள் இடைவெளியை சரிசெய்ய வேண்டியிருக்கலாம். உங்கள் வடிவமைப்புத் தேவைகளைப் பொறுத்து, `justify-content` உடன் `space-around` அல்லது `space-between` ஐப் பயன்படுத்தவும்.


.container {
  display: flex;
  justify-content: space-around; /* பொருட்களைச் சுற்றி இடைவெளியுடன் விநியோகிக்கவும் */
  align-items: center;
  height: 200px;
}

5. சிக்கலான லேஅவுட்கள் மற்றும் ரெஸ்பான்சிவ் வடிவமைப்பு

சிக்கலான மற்றும் ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்குவதற்கு Flexbox விதிவிலக்காக நன்கு பொருந்துகிறது. இது மிதவைகள் (floats) அல்லது இன்லைன்-பிளாக்கை (inline-block) மட்டும் நம்பியிருப்பதை விட மிகவும் வலுவான அணுகுமுறையாகும். `flex-direction`, `flex-wrap`, மற்றும் மீடியா வினவல்களின் (media queries) கலவையானது மிகவும் மாற்றியமைக்கக்கூடிய வடிவமைப்புகளை அனுமதிக்கிறது. மொபைல் சாதனங்கள் சர்வவியாபியாக இருக்கும் அமெரிக்கா போன்ற நாடுகளில் உள்ள பயனர்கள் முதல் சுவிட்சர்லாந்து போன்ற கணிசமான டெஸ்க்டாப் பயன்பாடு உள்ள பகுதிகள் வரை பல்வேறு சாதனங்களுக்கு ஏற்றவாறு இது அவசியம்.

பல-வரிசை லேஅவுட்கள்:

பொருட்களை அடுத்த வரிக்கு மடிக்க அனுமதிக்க `flex-wrap: wrap;` ஐப் பயன்படுத்தவும். மடிக்கப்பட்ட வரிகளின் செங்குத்து சீரமைப்பைக் கட்டுப்படுத்த இதை `align-content` உடன் இணைக்கவும்.


.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
}

.item {
  width: 30%; /* ரெஸ்பான்சிவ் நடத்தைக்கு சரிசெய்யவும் */
  margin: 10px;
  box-sizing: border-box; /* அகலக் கணக்கீட்டிற்கு முக்கியமானது */
}

இந்த எடுத்துக்காட்டில், பொருட்கள் கொள்கலனின் அகலத்தை மீறும் போது அடுத்த வரிக்கு மடிகின்றன. `box-sizing: border-box;` பண்பு, பேடிங் மற்றும் பார்டர் ஆகியவை உறுப்பின் மொத்த அகலத்தில் சேர்க்கப்படுவதை உறுதி செய்கிறது, இது ரெஸ்பான்சிவ் வடிவமைப்பை எளிதாக்குகிறது.

மீடியா வினவல்களைப் பயன்படுத்துதல்:

வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு லேஅவுட்களை உருவாக்க Flexbox-ஐ மீடியா வினவல்களுடன் இணைக்கவும். உதாரணமாக, வெவ்வேறு சாதனங்களுக்கு உங்கள் லேஅவுட்டை மேம்படுத்த `flex-direction`, `justify-content`, மற்றும் `align-items` பண்புகளை நீங்கள் மாற்றலாம். பிரேசில் போன்ற நாடுகளில் மொபைல்-முதல் வடிவமைப்புகள் முதல் சுவீடன் போன்ற நாடுகளில் டெஸ்க்டாப்-மையப்படுத்தப்பட்ட அனுபவங்கள் வரை, உலகெங்கிலும் பார்க்கப்படும் வலைத்தளங்களை உருவாக்குவதற்கு இது அவசியம்.


/* பெரிய திரைகளுக்கான இயல்புநிலை ஸ்டைல்கள் */
.container {
  flex-direction: row;
  justify-content: space-between;
}

/* சிறிய திரைகளுக்கான மீடியா வினவல் (எ.கா., தொலைபேசிகள்) */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
  }
}

6. Flexbox மற்றும் அணுகல்தன்மை (Accessibility)

வலை மேம்பாட்டில் அணுகல்தன்மை மிக முக்கியமானது. Flexbox பொதுவாக அணுகக்கூடியது, ஆனால் நீங்கள் இந்த காரணிகளைக் கருத்தில் கொள்ள வேண்டும்:

மூல வரிசை (Source Order): மூல வரிசையை (உங்கள் HTML-இல் உள்ள உறுப்புகளின் வரிசை) மனதில் கொள்ளுங்கள். `order` பண்பு காட்சி மறுவரிசைப்படுத்தலை அனுமதித்தாலும், டேப் வரிசை (மற்றும் ஸ்கிரீன் ரீடர்களால் படிக்கப்படும் வரிசை) HTML மூல வரிசையைப் பின்பற்றுகிறது. குழப்பமான வழிசெலுத்தல் அனுபவத்தை உருவாக்கும் வகையில் `order`-ஐப் பயன்படுத்துவதைத் தவிர்க்கவும். அனைத்து நாடுகளிலும் மாற்றுத்திறனாளிகளுக்கான பயனர் அனுபவம் முக்கியமானது.
சொற்பொருள் HTML (Semantic HTML): உங்கள் உள்ளடக்கத்திற்கு கட்டமைப்பையும் அர்த்தத்தையும் வழங்க எப்போதும் சொற்பொருள் HTML உறுப்புகளைப் (எ.கா., `
`, `
`, `
`) பயன்படுத்தவும். Flexbox லேஅவுட்டை வழங்குகிறது, ஆனால் சொற்பொருள் HTML அர்த்தத்தை வழங்குகிறது.
விசைப்பலகை வழிசெலுத்தல் (Keyboard Navigation): உங்கள் லேஅவுட்கள் விசைப்பலகை மூலம் செல்லக்கூடியதாக இருப்பதை உறுதிசெய்யவும். உதவித் தொழில்நுட்பங்களுக்கு கூடுதல் சூழலை வழங்க பொருத்தமான ARIA பண்புகளைப் (எ.கா., `aria-label`, `aria-describedby`) பயன்படுத்தவும்.
மாறுபாடு விகிதம் (Contrast Ratio): ஒரு பயனரின் நாடு எதுவாக இருந்தாலும், அணுகல்தன்மை வழிகாட்டுதல்களைப் பூர்த்தி செய்ய உரை மற்றும் பின்னணி உறுப்புகளுக்கு இடையில் போதுமான வண்ண மாறுபாடு இருப்பதை உறுதிசெய்யவும்.

7. Flexbox சிக்கல்களைத் தீர்ப்பது (Debugging)

Flexbox-ஐ சரிசெய்வது சில நேரங்களில் தந்திரமானதாக இருக்கலாம். பொதுவான சிக்கல்களை எவ்வாறு அணுகுவது என்பது இங்கே:

கொள்கலனை ஆய்வு செய்யவும்: பெற்றோர் உறுப்பில் `display: flex;` அல்லது `display: inline-flex;` உள்ளதா மற்றும் பண்புகள் சரியாகப் பயன்படுத்தப்பட்டுள்ளதா என்பதைச் சரிபார்க்கவும்.
பண்புகளைச் சரிபார்க்கவும்: `flex-direction`, `justify-content`, `align-items`, `flex-wrap`, `flex-grow`, `flex-shrink`, மற்றும் `flex-basis` ஆகியவற்றின் மதிப்புகளை கவனமாக ஆராயுங்கள். அவை விரும்பிய மதிப்புகளுக்கு அமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்: உலாவி டெவலப்பர் கருவிகள் (எ.கா., Chrome DevTools, Firefox Developer Tools) உங்கள் சிறந்த நண்பர்கள். அவை கணக்கிடப்பட்ட ஸ்டைல்களை ஆய்வு செய்யவும், மரபுரிமைச் சிக்கல்களைக் கண்டறியவும், மற்றும் flexbox லேஅவுட்டை காட்சிப்படுத்தவும் உங்களை அனுமதிக்கின்றன. ஆஸ்திரேலியா அல்லது அர்ஜென்டினா போன்ற இடங்களில் உட்பட, உலகளவில் டெவலப்பர்களால் அவற்றைப் பயன்படுத்தலாம்.
Flexbox-ஐ காட்சிப்படுத்தவும்: flexbox லேஅவுட்டை காட்சிப்படுத்த உலாவி நீட்டிப்புகள் அல்லது ஆன்லைன் கருவிகளைப் பயன்படுத்தவும். இந்த கருவிகள் பொருட்கள் எவ்வாறு நிலைநிறுத்தப்பட்டு விநியோகிக்கப்படுகின்றன என்பதைப் புரிந்துகொள்ள உங்களுக்கு உதவும்.
வெவ்வேறு திரை அளவுகளை சோதிக்கவும்: உங்கள் லேஅவுட் எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த, வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்களில் எப்போதும் சோதிக்கவும். பல்வேறு சாதனங்களைப் உருவகப்படுத்த உலாவி டெவலப்பர் கருவிகள் போன்ற கருவிகளைப் பயன்படுத்தவும்.
HTML கட்டமைப்பை ஆய்வு செய்யவும்: உங்கள் HTML கட்டமைப்பு சரியாக உள்ளதா என்பதை உறுதிப்படுத்தவும். தவறான கூடு அமைப்பு சில நேரங்களில் எதிர்பாராத Flexbox நடத்தைக்கு வழிவகுக்கும்.

8. நிஜ-உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

மேம்பட்ட Flexbox நுட்பங்களின் சில நடைமுறைப் பயன்பாடுகளை ஆராய்வோம்:

a) வழிசெலுத்தல் பட்டைகள் (Navigation Bars):

ரெஸ்பான்சிவ் வழிசெலுத்தல் பட்டைகளை உருவாக்குவதற்கு Flexbox சிறந்தது. `justify-content: space-between;` ஐப் பயன்படுத்தி, நீங்கள் எளிதாக ஒரு பக்கத்தில் ஒரு லோகோவையும் மறுபுறம் வழிசெலுத்தல் இணைப்புகளையும் நிலைநிறுத்தலாம். இது உலகெங்கிலும் உள்ள வலைத்தளங்களுக்கு ஒரு சர்வவியாபி வடிவமைப்பு உறுப்பு ஆகும்.


<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f0f0f0;
}

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

b) கார்டு லேஅவுட்கள்:

ரெஸ்பான்சிவ் கார்டு லேஅவுட்களை உருவாக்குவது ஒரு பொதுவான பணியாகும். சிறிய திரைகளில் கார்டுகளை பல வரிசைகளில் மடிக்க `flex-wrap: wrap;` ஐப் பயன்படுத்தவும். இது பல்வேறு பிராந்தியங்களில் இருந்து பயனர்களுக்கு சேவை செய்யும் இ-காமர்ஸ் தளங்களுக்கு குறிப்பாகப் பொருத்தமானது.


<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>


.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

.card {
  width: 300px;
  margin: 10px;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
}

c) அடிக்குறிப்பு லேஅவுட்கள் (Footer Layouts):

Flexbox கிடைமட்ட அல்லது செங்குத்து அச்சில் விநியோகிக்கப்பட்ட உறுப்புகளுடன் நெகிழ்வான அடிக்குறிப்புகளை உருவாக்குவதை எளிதாக்குகிறது. இந்த நெகிழ்வுத்தன்மை உலகளவில் பல்வேறு பார்வையாளர்களுக்கு சேவை செய்யும் வலைத்தளங்களுக்கு முக்கியமானது. பிலிப்பைன்ஸ் அல்லது தென்னாப்பிரிக்கா போன்ற வெவ்வேறு நாடுகளில் உள்ள பயனர்களுக்கு, பதிப்புரிமைத் தகவல், சமூக ஊடக ஐகான்கள், மற்றும் பிற சட்டத் தகவல்களைக் கொண்ட அடிக்குறிப்பு, வெவ்வேறு திரைகளுக்கு ஏற்றவாறு தன்னை மாறும் வகையில் வடிவமைக்கப்பட்ட ஒரு வலைத்தளம் மிகவும் பயனுள்ளதாக இருக்கும்.


<footer class="footer">
  <div class="copyright">© 2024 My Website</div>
  <div class="social-links">
    <a href="#">Facebook</a>
    <a href="#">Twitter</a>
  </div>
</footer>


.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: white;
}

.social-links {
  display: flex;
}

.social-links a {
  margin-left: 10px;
}

9. பொதுவான Flexbox தவறுகள் மற்றும் தீர்வுகள்

Flexbox பற்றிய திடமான புரிதல் இருந்தபோதிலும், நீங்கள் சில பொதுவான தவறுகளை சந்திக்க நேரிடலாம். அவற்றை எவ்வாறு கையாள்வது என்பது இங்கே:

எதிர்பாராத பொருள் அளவிடுதல்: flex பொருட்கள் எதிர்பார்த்தபடி செயல்படவில்லை என்றால், `flex-basis`, `flex-grow`, மற்றும் `flex-shrink` பண்புகளை இருமுறை சரிபார்க்கவும். மேலும், பொருட்கள் வளர அல்லது சுருங்க கொள்கலனில் போதுமான இடம் இருப்பதை உறுதிப்படுத்தவும்.
செங்குத்து சீரமைப்பு சிக்கல்கள்: பொருட்களை செங்குத்தாக சீரமைப்பதில் சிக்கல் இருந்தால், கொள்கலன் ஒரு வரையறுக்கப்பட்ட உயரத்தைக் கொண்டிருப்பதை உறுதிப்படுத்தவும். மேலும், `align-items` மற்றும் `align-content` பண்புகளைச் சரிபார்க்கவும்.
வழிதல் சிக்கல்கள் (Overflow Issues): Flexbox சில நேரங்களில் உள்ளடக்கம் கொள்கலனை விட்டு வெளியே வழிந்து செல்ல காரணமாக இருக்கலாம். வழிதலை நிர்வகிக்க flex பொருளில் `overflow: hidden;` அல்லது `overflow: scroll;` ஐப் பயன்படுத்தவும்.
`box-sizing`-ஐப் புரிந்துகொள்ளுதல்: உங்கள் லேஅவுட்களில் எப்போதும் `box-sizing: border-box;` ஐப் பயன்படுத்தவும். `box-sizing` CSS பண்பு ஒரு உறுப்பின் மொத்த அகலம் மற்றும் உயரம் எவ்வாறு கணக்கிடப்படுகிறது என்பதை வரையறுக்கிறது. `box-sizing: border-box;` அமைக்கப்படும் போது, ஒரு உறுப்பின் பேடிங் மற்றும் பார்டர் ஆகியவை உறுப்பின் மொத்த அகலம் மற்றும் உயரத்தில் சேர்க்கப்படுகின்றன, அதே நேரத்தில் உள்ளடக்கத்தின் அகலம் மட்டுமே உள்ளடக்கத்தின் மொத்த உயரத்தில் சேர்க்கப்படுகிறது.
கூடு கட்டப்பட்ட Flex கொள்கலன்கள் (Nested Flex Containers): flex கொள்கலன்களை கூடு கட்டும்போது கவனமாக இருங்கள். கூடு கட்டப்பட்ட flex கொள்கலன்கள் சில நேரங்களில் சிக்கலான லேஅவுட் சிக்கல்களுக்கு வழிவகுக்கும். கட்டமைப்பை எளிதாக்குவதைக் கருத்தில் கொள்ளவும் அல்லது கூடு அமைப்பை திறம்பட நிர்வகிக்க உங்கள் CSS-ஐ சரிசெய்யவும்.

10. Flexbox vs. Grid: சரியான கருவியைத் தேர்ந்தெடுத்தல்

Flexbox மற்றும் CSS Grid ஆகிய இரண்டும் சக்திவாய்ந்த லேஅவுட் கருவிகள், ஆனால் அவை வெவ்வேறு பகுதிகளில் சிறந்து விளங்குகின்றன. வேலைக்கு சரியான கருவியைத் தேர்ந்தெடுப்பதற்கு அவற்றின் பலங்களைப் புரிந்துகொள்வது அவசியம்.

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

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

11. Flexbox மற்றும் CSS லேஅவுட்டின் எதிர்காலம்

Flexbox என்பது நவீன வலை மேம்பாட்டின் ஒரு மூலக்கல்லாக மாறியுள்ள ஒரு முதிர்ந்த தொழில்நுட்பமாகும். CSS Grid வேகமாக வளர்ந்து புதிய திறன்களை வழங்கும் அதே வேளையில், Flexbox மிகவும் பொருத்தமானதாக உள்ளது, குறிப்பாக ஒரு-பரிமாண லேஅவுட்கள் மற்றும் கூறு-சார்ந்த வடிவமைப்பிற்கு. முன்னோக்கிப் பார்க்கையில், புதிய அம்சங்களின் சாத்தியமான ஒருங்கிணைப்புகள் மற்றும் தற்போதுள்ள விவரக்குறிப்புகளில் முன்னேற்றங்களுடன், CSS லேஅவுட் நிலப்பரப்பில் தொடர்ச்சியான மேம்பாடுகளை நாம் எதிர்பார்க்கலாம்.

வலைத் தொழில்நுட்பங்கள் தொடர்ந்து உருவாகி வருவதால், சமீபத்திய போக்குகள், சிறந்த நடைமுறைகள், மற்றும் உலாவி ஆதரவு குறித்து புதுப்பித்த நிலையில் இருப்பது அவசியம். தொடர்ந்து பயிற்சி செய்வது, பரிசோதனை செய்வது, மற்றும் புதிய நுட்பங்களை ஆராய்வது ஆகியவை Flexbox-இல் தேர்ச்சி பெறுவதற்கும், உலகளாவிய பார்வையாளர்களின் பல்வேறு தேவைகளைப் பூர்த்தி செய்யும் பிரமிக்க வைக்கும் மற்றும் ரெஸ்பான்சிவ் வலை இடைமுகங்களை உருவாக்குவதற்கும் திறவுகோல்களாகும்.

12. முடிவுரை: உலகளாவிய வலை மேம்பாட்டிற்காக Flexbox-இல் தேர்ச்சி பெறுதல்

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