Flexbox அளவீட்டு வழிமுறையை எளிதாக்குதல்: உள்ளடக்க அடிப்படையிலான தளவமைப்புகளில் ஒரு ஆழமான பார்வை

சரியான சமமான பத்திகளை (columns) எதிர்பார்க்கும் வகையில், சில பொருட்களுக்கு flex: 1 பயன்படுத்தி, அவை இன்னும் வித்தியாசமான அளவுகளில் இருப்பதைக் கண்டிருக்கிறீர்களா? அல்லது, ஒரு ஃபிளெக்ஸ் பொருள் சுருங்க மறுத்து, உங்கள் வடிவமைப்பை உடைக்கும் ஒரு அசிங்கமான வழிதலை (overflow) ஏற்படுத்தியிருக்கிறதா? இந்த பொதுவான விரக்திகள் டெவலப்பர்களை யூகம் மற்றும் சீரற்ற பண்பு மாற்றங்களின் சுழற்சிக்கு இட்டுச் செல்கின்றன. இருப்பினும், தீர்வு மாயாஜாலம் அல்ல; அது தர்க்கம்.

இந்த புதிர்களுக்கான விடை CSS விவரக்குறிப்பில் ஆழமாக, Flexbox உள்ளார்ந்த அளவீட்டு வழிமுறை (Flexbox Intrinsic Sizing Algorithm) எனப்படும் ஒரு செயல்முறையில் உள்ளது. இது Flexbox-ஐ இயக்கும் சக்திவாய்ந்த, உள்ளடக்கத்தை அறிந்த இயந்திரம், ஆனால் அதன் உள் தர்க்கம் பெரும்பாலும் ஒரு ஒளிபுகா கறுப்புப் பெட்டி போல உணரப்படலாம். இந்த வழிமுறையைப் புரிந்துகொள்வது Flexbox-ல் தேர்ச்சி பெறுவதற்கும், உண்மையிலேயே கணிக்கக்கூடிய, நெகிழ்வான பயனர் இடைமுகங்களை உருவாக்குவதற்கும் முக்கியமாகும்.

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

நிலையான பிக்சல்களுக்கு அப்பால்: உள்ளார்ந்த மற்றும் வெளிப்புற அளவீட்டைப் புரிந்துகொள்வது

வழிமுறைக்குள் முழுமையாக மூழ்குவதற்கு முன், CSS தளவமைப்பில் ஒரு அடிப்படைக் கருத்தைப் புரிந்துகொள்வது முக்கியம்: உள்ளார்ந்த மற்றும் வெளிப்புற அளவீட்டிற்கு இடையிலான வேறுபாடு.

• வெளிப்புற அளவீடு (Extrinsic Sizing): இது நீங்கள், அதாவது டெவலப்பர், ஒரு தனிமத்தின் அளவை வெளிப்படையாக வரையறுக்கும் போது ஏற்படுகிறது. width: 500px, height: 50%, அல்லது width: 30rem போன்ற பண்புகள் வெளிப்புற அளவீட்டிற்கான எடுத்துக்காட்டுகள். தனிமத்தின் உள்ளடக்கத்திற்கு வெளிப்புற காரணிகளால் அளவு தீர்மானிக்கப்படுகிறது.
• உள்ளார்ந்த அளவீடு (Intrinsic Sizing): இது உலவி ஒரு தனிமத்தின் அளவை அது கொண்டிருக்கும் உள்ளடக்கத்தின் அடிப்படையில் கணக்கிடும் போது ஏற்படுகிறது. நீண்ட உரை லேபிளுக்கு இடமளிக்க இயற்கையாகவே அகலமாக வளரும் ஒரு பொத்தான் உள்ளார்ந்த அளவீட்டைப் பயன்படுத்துகிறது. தனிமத்திற்குள் இருக்கும் காரணிகளால் அளவு தீர்மானிக்கப்படுகிறது.

Flexbox உள்ளார்ந்த, உள்ளடக்க அடிப்படையிலான அளவீட்டில் ஒரு மாஸ்டர். நீங்கள் விதிகளை (flex பண்புகள்) வழங்கும்போது, உலவி ஃபிளெக்ஸ் பொருட்களின் உள்ளடக்கம் மற்றும் கொள்கலனில் உள்ள இடத்தின் அடிப்படையில் இறுதி அளவீட்டு முடிவுகளை எடுக்கிறது. இதுதான் திரவ, ரெஸ்பான்சிவ் வடிவமைப்புகளை உருவாக்குவதற்கு மிகவும் சக்தி வாய்ந்ததாக ஆக்குகிறது.

நெகிழ்வுத்தன்மையின் மூன்று தூண்கள்: `flex-basis`, `flex-grow`, மற்றும் `flex-shrink` பற்றிய ஒரு மீள்பார்வை

Flexbox வழிமுறையின் முடிவுகள் முதன்மையாக மூன்று பண்புகளால் வழிநடத்தப்படுகின்றன, அவை பெரும்பாலும் flex சுருக்கெழுத்தைப் பயன்படுத்தி ஒன்றாக அமைக்கப்படுகின்றன. அடுத்தடுத்த படிகளைப் புரிந்துகொள்வதற்கு இவற்றைப் பற்றிய ஒரு திடமான புரிதல் அவசியமானது.

1. `flex-basis`: தொடக்கக் கோடு

flex-basis-ஐ, எந்தவொரு வளர்ச்சி அல்லது சுருக்கம் ஏற்படுவதற்கு முன்பு, முக்கிய அச்சில் ஒரு ஃபிளெக்ஸ் பொருளின் சிறந்த அல்லது "கருதுகோள்" தொடக்க அளவாக நினைத்துப் பாருங்கள். மற்ற அனைத்து கணக்கீடுகளும் இதிலிருந்தே செய்யப்படுகின்றன.

• இது ஒரு நீளமாக (எ.கா., 100px, 10rem) அல்லது சதவீதமாக (25%) இருக்கலாம்.
• இயல்புநிலை மதிப்பு auto ஆகும். auto என அமைக்கப்பட்டால், உலவி முதலில் பொருளின் முக்கிய அளவு பண்பைப் (ஒரு கிடைமட்ட ஃபிளெக்ஸ் கொள்கலனுக்கு width, ஒரு செங்குத்து ஒன்றிற்கு height) பார்க்கும்.
• இங்கே முக்கியமான இணைப்பு: முக்கிய அளவு பண்பும் auto ஆக இருந்தால், flex-basis பொருளின் உள்ளார்ந்த, உள்ளடக்க அடிப்படையிலான அளவிற்குத் தீர்க்கப்படுகிறது. இப்படித்தான் உள்ளடக்கம் அளவீட்டு செயல்முறையில் ஆரம்பத்திலிருந்தே ஒரு வாக்கைப் பெறுகிறது.
• content என்ற மதிப்பும் கிடைக்கிறது, இது உலவிக்கு உள்ளார்ந்த அளவைப் பயன்படுத்த வெளிப்படையாகக் கூறுகிறது.

2. `flex-grow`: நேர்மறை இடத்தைக் கோருதல்

flex-grow பண்பு என்பது ஒரு அலகு இல்லாத எண். இது ஃபிளெக்ஸ் கொள்கலனில் உள்ள நேர்மறையான காலி இடத்தில் ஒரு பொருள் அதன் உடன்பிறப்புகளுடன் ஒப்பிடும்போது எவ்வளவு உறிஞ்ச வேண்டும் என்பதைக் குறிப்பிடுகிறது. கொள்கலன் அதன் அனைத்து பொருட்களின் `flex-basis` மதிப்புகளின் கூட்டுத்தொகையை விட பெரியதாக இருக்கும்போது நேர்மறை காலி இடம் உள்ளது.

• இயல்புநிலை மதிப்பு 0 ஆகும், அதாவது பொருட்கள் இயல்பாக வளராது.
• அனைத்து பொருட்களுக்கும் flex-grow: 1 இருந்தால், மீதமுள்ள இடம் அவற்றுக்கிடையே சமமாகப் பகிரப்படும்.
• ஒரு பொருளுக்கு flex-grow: 2 மற்றும் மற்றவற்றுக்கு flex-grow: 1 இருந்தால், முதல் பொருள் மற்றவற்றை விட இரண்டு மடங்கு காலி இடத்தைப் பெறும்.

3. `flex-shrink`: எதிர்மறை இடத்தைக் கைவிடுதல்

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

• இயல்புநிலை மதிப்பு 1 ஆகும், அதாவது தேவைப்பட்டால் பொருட்கள் இயல்பாக சுருங்க அனுமதிக்கப்படுகின்றன.
• ஒரு பொதுவான தவறான கருத்து என்னவென்றால், flex-shrink: 2 ஒரு பொருளை "இரண்டு மடங்கு வேகமாக" சுருங்கச் செய்கிறது என்பதுதான். இது மேலும் நுணுக்கமானது: ஒரு பொருள் சுருங்கும் அளவு அதன் `flex-shrink` காரணியை அதன் `flex-basis`-ஆல் பெருக்கியதற்கு விகிதாசாரமாக இருக்கும். இந்த முக்கியமான விவரத்தை பின்னர் ஒரு நடைமுறை உதாரணத்துடன் ஆராய்வோம்.

Flexbox அளவீட்டு வழிமுறை: ஒரு படிப்படியான விளக்கம்

இப்போது, திரையை விலக்கி உலவியின் சிந்தனை செயல்முறையை ஆராய்வோம். அதிகாரப்பூர்வ W3C விவரக்குறிப்பு மிகவும் தொழில்நுட்பமானது மற்றும் துல்லியமானது என்றாலும், ஒரு ஒற்றை ஃபிளெக்ஸ் வரிசைக்கான முக்கிய தர்க்கத்தை மேலும் ஜீரணிக்கக்கூடிய, தொடர்ச்சியான மாதிரியாக எளிமைப்படுத்தலாம்.

படி 1: Flex அடிப்படை அளவுகளையும் கருதுகோள் செய்யப்பட்ட முக்கிய அளவுகளையும் தீர்மானித்தல்

முதலில், உலாவிக்கு ஒவ்வொரு பொருளுக்கும் ஒரு தொடக்கப் புள்ளி தேவை. அது கொள்கலனில் உள்ள ஒவ்வொரு பொருளுக்கும் ஃபிளெக்ஸ் அடிப்படை அளவை (flex base size) கணக்கிடுகிறது. இது முதன்மையாக flex-basis பண்பின் தீர்க்கப்பட்ட மதிப்பால் தீர்மானிக்கப்படுகிறது. இந்த ஃபிளெக்ஸ் அடிப்படை அளவு அடுத்த படிகளுக்கான பொருளின் "கருதுகோள் செய்யப்பட்ட முக்கிய அளவு" ஆகிறது. இது அதன் உடன்பிறப்புகளுடன் எந்தவொரு பேச்சுவார்த்தைக்கும் முன் பொருள் இருக்க விரும்பும் அளவு.

படி 2: Flex கொள்கலனின் முக்கிய அளவைத் தீர்மானித்தல்

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

படி 3: Flex பொருட்களை Flex வரிகளில் சேகரித்தல்

பின்னர் உலவி பொருட்களை எவ்வாறு குழுவாக்குவது என்பதை தீர்மானிக்கிறது. flex-wrap: nowrap (இயல்புநிலை) அமைக்கப்பட்டால், அனைத்து பொருட்களும் ஒரு ஒற்றை வரியின் பகுதியாகக் கருதப்படுகின்றன. flex-wrap: wrap அல்லது wrap-reverse செயலில் இருந்தால், உலவி பொருட்களை ஒன்று அல்லது அதற்கு மேற்பட்ட வரிகளில் விநியோகிக்கிறது. வழிமுறையின் மீதமுள்ள பகுதி ஒவ்வொரு வரிசை பொருட்களுக்கும் சுயாதீனமாகப் பயன்படுத்தப்படுகிறது.

படி 4: நெகிழ்வான நீளங்களைத் தீர்த்தல் (முக்கிய தர்க்கம்)

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

பகுதி 4a: காலி இடத்தைக் கணக்கிடுதல்

உலவி ஒரு ஃபிளெக்ஸ் வரிசையில் உள்ள மொத்த காலி இடத்தைக் கணக்கிடுகிறது. இது கொள்கலனின் முக்கிய அளவிலிருந்து (படி 2) அனைத்து பொருட்களின் ஃபிளெக்ஸ் அடிப்படை அளவுகளின் (படி 1-லிருந்து) கூட்டுத்தொகையைக் கழிப்பதன் மூலம் இதைச் செய்கிறது.

காலி இடம் = கொள்கலனின் முக்கிய அளவு - அனைத்து பொருட்களின் Flex அடிப்படை அளவுகளின் கூட்டுத்தொகை

இந்த முடிவு இவ்வாறு இருக்கலாம்:

• நேர்மறை: கொள்கலனில் பொருட்களுக்குத் தேவையானதை விட அதிக இடம் உள்ளது. இந்த கூடுதல் இடம் flex-grow-ஐப் பயன்படுத்தி விநியோகிக்கப்படும்.
• எதிர்மறை: பொருட்கள் கூட்டாக கொள்கலனை விட பெரியவை. இந்த இடப் பற்றாக்குறை (ஒரு வழிதல்) பொருட்கள் அவற்றின் flex-shrink மதிப்புகளுக்கு ஏற்ப சுருங்க வேண்டும் என்பதாகும்.
• பூஜ்ஜியம்: பொருட்கள் சரியாகப் பொருந்துகின்றன. வளரவோ சுருங்கவோ தேவையில்லை.

பகுதி 4b: காலி இடத்தை விநியோகித்தல்

இப்போது, உலவி கணக்கிடப்பட்ட காலி இடத்தை விநியோகிக்கிறது. இது ஒரு மீண்டும் மீண்டும் நிகழும் செயல்முறை, ஆனால் நாம் தர்க்கத்தை சுருக்கமாகக் கூறலாம்:

• காலி இடம் நேர்மறையாக இருந்தால் (வளர்தல்):
  1. உலவி வரியில் உள்ள பொருட்களின் அனைத்து flex-grow காரணிகளையும் கூட்டுகிறது.
  2. பின்னர் அது ஒவ்வொரு பொருளுக்கும் நேர்மறையான காலி இடத்தை விகிதாசாரமாக விநியோகிக்கிறது. ஒரு பொருள் பெறும் இடத்தின் அளவு: (பொருளின் flex-grow / அனைத்து flex-grow காரணிகளின் கூட்டுத்தொகை) * நேர்மறை காலி இடம்.
  3. ஒரு பொருளின் இறுதி அளவு அதன் flex-basis மற்றும் விநியோகிக்கப்பட்ட இடத்தின் பங்கின் கூட்டுத்தொகையாகும். இந்த வளர்ச்சி பொருளின் max-width அல்லது max-height பண்புகளால் கட்டுப்படுத்தப்படுகிறது.
• காலி இடம் எதிர்மறையாக இருந்தால் (சுருங்குதல்):
  1. இது மிகவும் சிக்கலான பகுதி. ஒவ்வொரு பொருளுக்கும், உலவி அதன் ஃபிளெக்ஸ் அடிப்படை அளவை அதன் flex-shrink மதிப்பால் பெருக்கி ஒரு எடையிடப்பட்ட சுருக்கக் காரணியை (weighted shrink factor) கணக்கிடுகிறது: எடையிடப்பட்ட சுருக்கக் காரணி = Flex அடிப்படை அளவு * flex-shrink.
  2. பின்னர் அது இந்த அனைத்து எடையிடப்பட்ட சுருக்கக் காரணிகளையும் கூட்டுகிறது.
  3. எதிர்மறை இடம் (வழிதலின் அளவு) இந்த எடையிடப்பட்ட காரணியின் அடிப்படையில் ஒவ்வொரு பொருளுக்கும் விகிதாசாரமாக விநியோகிக்கப்படுகிறது. ஒரு பொருள் சுருங்கும் அளவு: (பொருளின் எடையிடப்பட்ட சுருக்கக் காரணி / அனைத்து எடையிடப்பட்ட சுருக்கக் காரணிகளின் கூட்டுத்தொகை) * எதிர்மறை காலி இடம்.
  4. ஒரு பொருளின் இறுதி அளவு அதன் flex-basis-லிருந்து விநியோகிக்கப்பட்ட எதிர்மறை இடத்தின் பங்கைக் கழித்ததாகும். இந்த சுருக்கம் பொருளின் min-width அல்லது min-height பண்புகளால் கட்டுப்படுத்தப்படுகிறது, இது முக்கியமாக auto-விற்கு இயல்பாக அமைகிறது.

படி 5: முக்கிய-அச்சு சீரமைப்பு

அனைத்து பொருட்களின் இறுதி அளவுகளும் தீர்மானிக்கப்பட்டவுடன், உலவி justify-content பண்பைப் பயன்படுத்தி கொள்கலனுக்குள் முக்கிய அச்சில் பொருட்களை சீரமைக்கிறது. இது அனைத்து அளவீட்டு கணக்கீடுகளும் முடிந்த பிறகு நடக்கிறது.

நடைமுறைச் சூழல்கள்: கோட்பாட்டிலிருந்து யதார்த்தத்திற்கு

கோட்பாட்டைப் புரிந்துகொள்வது ஒரு விஷயம்; அதை செயலில் பார்ப்பது அறிவை உறுதிப்படுத்துகிறது. வழிமுறை பற்றிய நமது புரிதலுடன் இப்போது எளிதாக விளக்கக்கூடிய சில பொதுவான சூழல்களைக் கையாள்வோம்.

சூழல் 1: உண்மையான சமமான பத்திகள் மற்றும் `flex: 1` சுருக்கெழுத்து

சிக்கல்: நீங்கள் அனைத்து பொருட்களுக்கும் flex-grow: 1 பயன்படுத்துகிறீர்கள், ஆனால் அவை சமமான அகலங்களைக் கொண்டிருக்கவில்லை.

விளக்கம்: இது நீங்கள் flex: auto (இது flex: 1 1 auto என விரிவடைகிறது) போன்ற ஒரு சுருக்கெழுத்தைப் பயன்படுத்தும்போது அல்லது flex-grow: 1 ஐ மட்டும் அமைத்து flex-basis-ஐ அதன் இயல்புநிலையான auto-வில் விடும்போது நிகழ்கிறது. வழிமுறையின்படி, flex-basis: auto பொருளின் உள்ளடக்க அளவிற்குத் தீர்க்கப்படுகிறது. எனவே, அதிக உள்ளடக்கம் கொண்ட ஒரு பொருள் பெரிய ஃபிளெக்ஸ் அடிப்படை அளவுடன் தொடங்குகிறது. மீதமுள்ள காலி இடம் சமமாக விநியோகிக்கப்பட்டாலும், பொருட்களின் இறுதி அளவுகள் வித்தியாசமாக இருக்கும், ஏனெனில் அவற்றின் தொடக்கப் புள்ளிகள் வித்தியாசமாக இருந்தன.

தீர்வு: flex: 1 என்ற சுருக்கெழுத்தைப் பயன்படுத்தவும். இது flex: 1 1 0% என விரிவடைகிறது. இங்கு முக்கியமானது flex-basis: 0%. இது ஒவ்வொரு பொருளையும் 0 என்ற கருதுகோள் அடிப்படை அளவுடன் தொடங்கும்படி கட்டாயப்படுத்துகிறது. கொள்கலனின் முழு அகலமும் "நேர்மறை காலி இடம்" ஆகிறது. அனைத்து பொருட்களுக்கும் flex-grow: 1 இருப்பதால், இந்த முழு இடமும் அவற்றுக்கிடையே சமமாக விநியோகிக்கப்படுகிறது, இதன் விளைவாக அவற்றின் உள்ளடக்கத்தைப் பொருட்படுத்தாமல் உண்மையான சம-அகல பத்திகள் உருவாகின்றன.

சூழல் 2: `flex-shrink` விகிதாசாரப் புதிர்

சிக்கல்: உங்களிடம் இரண்டு பொருட்கள் உள்ளன, இரண்டுமே flex-shrink: 1 உடன் உள்ளன, ஆனால் கொள்கலன் சுருங்கும்போது, ஒரு பொருள் மற்றொன்றை விட அதிக அகலத்தை இழக்கிறது.

விளக்கம்: இது எதிர்மறை இடத்திற்கான படி 4b-ன் ஒரு சரியான எடுத்துக்காட்டு. சுருங்குதல் என்பது flex-shrink காரணியை மட்டும் அடிப்படையாகக் கொண்டதல்ல; அது பொருளின் flex-basis-ஆல் எடையிடப்படுகிறது. ஒரு பெரிய பொருள் "விட்டுக்கொடுக்க" அதிகமாகக் கொண்டுள்ளது.

ஒரு 500px கொள்கலனை இரண்டு பொருட்களுடன் கருதுங்கள்:

• பொருள் A: flex: 0 1 400px; (400px அடிப்படை அளவு)
• பொருள் B: flex: 0 1 200px; (200px அடிப்படை அளவு)

மொத்த அடிப்படை அளவு 600px, இது கொள்கலனுக்கு 100px அதிகமாக உள்ளது (100px எதிர்மறை இடம்).

• பொருள் A-ன் எடையிடப்பட்ட சுருக்கக் காரணி: 400px * 1 = 400
• பொருள் B-ன் எடையிடப்பட்ட சுருக்கக் காரணி: 200px * 1 = 200
• மொத்த எடையிடப்பட்ட காரணிகள்: 400 + 200 = 600

இப்போது, 100px எதிர்மறை இடத்தை விநியோகிக்கவும்:

• பொருள் A சுருங்குகிறது: (400 / 600) * 100px = ~66.67px
• பொருள் B சுருங்குகிறது: (200 / 600) * 100px = ~33.33px

இரண்டுமே flex-shrink: 1 கொண்டிருந்தாலும், பெரிய பொருள் இரண்டு மடங்கு அகலத்தை இழந்தது, ஏனெனில் அதன் அடிப்படை அளவு இரண்டு மடங்கு பெரியதாக இருந்தது. வழிமுறை சரியாக வடிவமைக்கப்பட்டபடியே செயல்பட்டது.

சூழல் 3: சுருங்காத பொருள் மற்றும் `min-width: 0` தீர்வு

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

விளக்கம்: சுருங்கும் செயல்முறை ஒரு பொருளின் குறைந்தபட்ச அளவால் கட்டுப்படுத்தப்படுகிறது என்பதை நினைவில் கொள்ளுங்கள். இயல்பாக, ஃபிளெக்ஸ் பொருட்களுக்கு min-width: auto உள்ளது. உரை அல்லது படங்களைக் கொண்ட ஒரு தனிமத்திற்கு, இந்த auto மதிப்பு அதன் உள்ளார்ந்த குறைந்தபட்ச அளவிற்குத் தீர்க்கப்படுகிறது. உரைக்கு, இது பெரும்பாலும் மிக நீண்ட உடையாத வார்த்தை அல்லது வரியின் அகலமாக இருக்கும். ஃபிளெக்ஸ் வழிமுறை பொருளைச் சுருக்கும், ஆனால் இந்த கணக்கிடப்பட்ட குறைந்தபட்ச அகலத்தை அடைந்தவுடன் அது நின்றுவிடும், இன்னும் போதுமான இடம் இல்லையென்றால் வழிதலுக்கு வழிவகுக்கும்.

தீர்வு: ஒரு பொருளை அதன் உள்ளார்ந்த உள்ளடக்க அளவை விட சிறியதாக சுருங்க அனுமதிக்க, நீங்கள் இந்த இயல்புநிலை நடத்தையை மீற வேண்டும். மிகவும் பொதுவான தீர்வு ஃபிளெக்ஸ் பொருளுக்கு min-width: 0 பயன்படுத்துவதாகும். இது உலாவிக்கு, "தேவைப்பட்டால் இந்த பொருளை பூஜ்ஜிய அகலம் வரை சுருக்க உங்களுக்கு என் அனுமதி உண்டு," என்று கூறுகிறது, இதனால் வழிதலைத் தடுக்கிறது.

உள்ளார்ந்த அளவீட்டின் இதயம்: `min-content` மற்றும் `max-content`

உள்ளடக்க அடிப்படையிலான அளவீட்டை முழுமையாகப் புரிந்துகொள்ள, நாம் தொடர்புடைய இரண்டு முக்கிய வார்த்தைகளை விரைவாக வரையறுக்க வேண்டும்:

• max-content: ஒரு தனிமத்தின் உள்ளார்ந்த விருப்பமான அகலம். உரைக்கு, அது எல்லையற்ற இடம் இருந்தால் மற்றும் ஒருபோதும் மடிக்கத் தேவையில்லை என்றால் உரை எடுக்கும் அகலம்.
• min-content: ஒரு தனிமத்தின் உள்ளார்ந்த குறைந்தபட்ச அகலம். உரைக்கு, அது அதன் மிக நீண்ட உடையாத வரியின் அகலம் (எ.கா., ஒரு நீண்ட வார்த்தை). இது அதன் சொந்த உள்ளடக்கம் வழிந்து செல்லாமல் இருக்கக்கூடிய மிகச்சிறிய அகலம்.

flex-basis auto ஆகவும், பொருளின் width-ம் auto ஆகவும் இருக்கும்போது, உலவி அடிப்படையில் max-content அளவை பொருளின் தொடக்க ஃபிளெக்ஸ் அடிப்படை அளவாகப் பயன்படுத்துகிறது. இதனால்தான் ஃபிளெக்ஸ் வழிமுறை காலி இடத்தை விநியோகிக்கத் தொடங்குவதற்கு முன்பே அதிக உள்ளடக்கம் கொண்ட பொருட்கள் பெரியதாகத் தொடங்குகின்றன.

உலகளாவிய தாக்கங்கள் மற்றும் செயல்திறன்

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

சர்வதேசமயமாக்கல் (i18n) முக்கியமானது

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

ஜெர்மன் மொழியைக் கவனியுங்கள், அது அதன் நீண்ட கூட்டு வார்த்தைகளுக்குப் பிரபலமானது. "Donaudampfschifffahrtsgesellschaftskapitän" போன்ற ஒரு வார்த்தை ஒரு தனிமத்தின் min-content அளவை கணிசமாக அதிகரிக்கிறது. அந்த தனிமம் ஒரு ஃபிளெக்ஸ் பொருளாக இருந்தால், நீங்கள் குறுகிய ஆங்கில உரையுடன் தளவமைப்பை வடிவமைத்தபோது நீங்கள் எதிர்பாராத வழிகளில் அது சுருங்குவதை எதிர்க்கக்கூடும். இதேபோல், ஜப்பானிய அல்லது சீன போன்ற சில மொழிகளில் வார்த்தைகளுக்கு இடையில் இடைவெளிகள் இல்லாமல் இருக்கலாம், இது மடித்தல் மற்றும் அளவிடுதல் எவ்வாறு கணக்கிடப்படுகிறது என்பதைப் பாதிக்கிறது. உள்ளார்ந்த வழிமுறையைப் புரிந்துகொள்வது ஏன் அனைவருக்கும், எல்லா இடங்களிலும் வேலை செய்யக்கூடிய அளவுக்கு வலுவான தளவமைப்புகளை உருவாக்குவதற்கு முக்கியம் என்பதற்கு இது ஒரு சரியான எடுத்துக்காட்டு.

செயல்திறன் குறிப்புகள்

உலவி ஃபிளெக்ஸ் பொருட்களின் உள்ளடக்கத்தை அவற்றின் உள்ளார்ந்த அளவுகளைக் கணக்கிட அளவிட வேண்டியிருப்பதால், ஒரு கணக்கீட்டுச் செலவு உள்ளது. பெரும்பாலான வலைத்தளங்கள் மற்றும் பயன்பாடுகளுக்கு, இந்தச் செலவு மிகக் குறைவு மற்றும் கவலைப்படத் தேவையில்லை. இருப்பினும், ஆயிரக்கணக்கான தனிமங்களைக் கொண்ட மிகவும் சிக்கலான, ஆழமாகப் பதிக்கப்பட்ட UI-களில், இந்த தளவமைப்புக் கணக்கீடுகள் ஒரு செயல்திறன் தடையாக மாறக்கூடும். அத்தகைய மேம்பட்ட சந்தர்ப்பங்களில், டெவலப்பர்கள் ரெண்டரிங் செயல்திறனை மேம்படுத்த contain: layout அல்லது content-visibility போன்ற CSS பண்புகளை ஆராயலாம், ஆனால் இது மற்றொரு நாளுக்கான தலைப்பு.

செயல்படுத்தக்கூடிய நுண்ணறிவுகள்: உங்கள் Flexbox அளவீட்டு ஏமாற்றுத் தாள்

சுருக்கமாக, நீங்கள் உடனடியாகப் பயன்படுத்தக்கூடிய முக்கிய குறிப்புகள் இங்கே:

• உண்மையான சம-அகல பத்திகளுக்கு: எப்போதும் flex: 1 (இது flex: 1 1 0% என்பதன் சுருக்கம்) பயன்படுத்தவும். பூஜ்ஜியத்தின் flex-basis தான் முக்கியம்.
• ஒரு பொருள் சுருங்கவில்லை என்றால்: மிகவும் சாத்தியமான குற்றவாளி அதன் மறைமுகமான min-width: auto. ஃபிளெக்ஸ் பொருளுக்கு min-width: 0 பயன்படுத்துவதன் மூலம் அதன் உள்ளடக்க அளவிற்குக் கீழே சுருங்க அனுமதிக்கவும்.
• `flex-shrink` எடையிடப்பட்டது என்பதை நினைவில் கொள்ளுங்கள்: ஒரு பெரிய flex-basis கொண்ட பொருட்கள் அதே flex-shrink காரணியைக் கொண்ட சிறிய பொருட்களை விட முழுமையான அடிப்படையில் அதிகமாக சுருங்கும்.
• `flex-basis` தான் ராஜா: இது அனைத்து அளவீட்டுக் கணக்கீடுகளுக்கும் தொடக்கப் புள்ளியை அமைக்கிறது. இறுதி தளவமைப்பில் அதிக செல்வாக்கு செலுத்த flex-basis-ஐக் கட்டுப்படுத்தவும். auto-வைப் பயன்படுத்துவது உள்ளடக்கத்தின் அளவிற்கு விட்டுவிடுகிறது; ஒரு குறிப்பிட்ட மதிப்பைப் பயன்படுத்துவது உங்களுக்கு வெளிப்படையான கட்டுப்பாட்டைக் கொடுக்கிறது.
• உலவியைப் போல சிந்தியுங்கள்: படிகளை மனதில் காட்சிப்படுத்துங்கள். முதலில், அடிப்படை அளவுகளைப் பெறுங்கள். பின்னர், காலி இடத்தைக் (நேர்மறை அல்லது எதிர்மறை) கணக்கிடுங்கள். இறுதியாக, அந்த இடத்தை வளர/சுருங்க விதிகளின்படி விநியோகிக்கவும்.

முடிவுரை

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

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