CSS Flexbox தேர்ச்சி: மேம்பட்ட சீரமைப்பு மற்றும் விநியோகம்

பல ஆண்டுகளாக, CSS Flexbox நவீன வலை லேஅவுட்டின் ஒரு மூலக்கல்லாக இருந்து வருகிறது. பெரும்பாலான டெவலப்பர்கள் ஒரு வரிசையில் பொருட்களை சீரமைக்க அல்லது எளிய மையப்படுத்தப்பட்ட கூறுகளை உருவாக்க display: flex ஐப் பயன்படுத்துவதில் வசதியாக உள்ளனர். இருப்பினும், Flexbox-இன் உண்மையான தேர்ச்சி, மேம்பட்ட சீரமைப்பு மற்றும் டைனமிக் விநியோகத்திற்கான அதன் நுணுக்கமான பண்புகளைப் புரிந்துகொள்வதில் உள்ளது. நீங்கள் justify-content: center மற்றும் align-items: center இன் அடிப்படைகளைத் தாண்டிச் செல்லும்போது, சிக்கலான, ரெஸ்பான்சிவ் மற்றும் உள்ளார்ந்த நெகிழ்வான லேஅவுட்களை வியக்கத்தக்க எளிதாக உருவாக்கும் சக்தியைத் திறக்கிறீர்கள்.

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

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

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

• முதன்மை அச்சு (Main Axis): இது flex பொருட்கள் வரிசைப்படுத்தப்படும் முதன்மை அச்சாகும். அதன் திசை flex-direction பண்பினால் வரையறுக்கப்படுகிறது.
• குறுக்கு அச்சு (Cross Axis): இந்த அச்சு எப்போதும் முதன்மை அச்சுக்கு செங்குத்தாக இருக்கும்.

முக்கியமான விஷயம் என்னவென்றால், இந்த அச்சுகள் நிலையானவை அல்ல. உங்கள் flex-direction மதிப்பைப் பொறுத்து அவை தங்களை மாற்றியமைத்துக் கொள்கின்றன:

• flex-direction: row (இயல்புநிலை): முதன்மை அச்சு கிடைமட்டமாகவும் (இடமிருந்து வலம்), குறுக்கு அச்சு செங்குத்தாகவும் (மேலிருந்து கீழ்) இருக்கும்.
• flex-direction: column: முதன்மை அச்சு செங்குத்தாகவும் (மேலிருந்து கீழ்), குறுக்கு அச்சு கிடைமட்டமாகவும் (இடமிருந்து வலம்) மாறும்.
• flex-direction: row-reverse: முதன்மை அச்சு கிடைமட்டமாக ஆனால் வலமிருந்து இடமாகச் செல்லும்.
• flex-direction: column-reverse: முதன்மை அச்சு செங்குத்தாக ஆனால் கீழிருந்து மேலாகச் செல்லும்.

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

justify-content உடன் முதன்மை அச்சு விநியோகத்தில் தேர்ச்சி பெறுதல்

justify-content பண்பு, முதன்மை அச்சு வழியாக flex பொருட்களுக்கு இடையில் மற்றும் அவற்றைச் சுற்றி இடம் எவ்வாறு விநியோகிக்கப்படுகிறது என்பதைக் கட்டுப்படுத்துகிறது. flex-start, flex-end, மற்றும் center ஆகியவை நேரடியானவை என்றாலும், உண்மையான சக்தி இட-விநியோக மதிப்புகளில் உள்ளது.

இட விநியோகம் பற்றிய ஒரு ஆழமான பார்வை

space-between, space-around, மற்றும் space-evenly ஆகியவற்றுக்கு இடையேயான நுட்பமான ஆனால் முக்கியமான வேறுபாடுகளைத் தெளிவுபடுத்துவோம்.

• justify-content: space-between;

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

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

• justify-content: space-around;

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

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

• justify-content: space-evenly;

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

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

align-items மற்றும் align-self உடன் குறுக்கு அச்சு சீரமைப்பை வெல்லுதல்

justify-content முதன்மை அச்சைக் கையாளும் அதே வேளையில், align-items ஆனது ஒரு வரியில் குறுக்கு அச்சு வழியாக பொருட்களின் இயல்புநிலை சீரமைப்பை நிர்வகிக்கிறது.

`align-items` மதிப்புகளைப் புரிந்துகொள்ளுதல்

• align-items: stretch; (இயல்புநிலை): இதனால்தான் உங்கள் flex பொருட்கள் நீங்கள் கேட்காமலேயே அவற்றின் கண்டெய்னரின் உயரத்தை நிரப்புவது போல் தோன்றுகிறது. பொருட்கள் குறுக்கு அச்சில் கண்டெய்னரின் அளவை நிரப்ப நீட்டப்படும் (எ.கா., `flex-direction: row` கண்டெய்னரில் உயரம்).
• align-items: flex-start;: பொருட்கள் குறுக்கு அச்சின் தொடக்கத்தில் அடுக்கப்படுகின்றன.
• align-items: flex-end;: பொருட்கள் குறுக்கு அச்சின் இறுதியில் அடுக்கப்படுகின்றன.
• align-items: center;: பொருட்கள் குறுக்கு அச்சில் மையப்படுத்தப்படுகின்றன.
• align-items: baseline;: இது ஒரு சக்திவாய்ந்த மற்றும் குறைவாகப் பயன்படுத்தப்படும் மதிப்பு. பொருட்கள் அவற்றின் உரை அடிப்படைக் கோடுகள் (text baselines) வரிசையாக இருக்கும்படி சீரமைக்கப்படுகின்றன. வெவ்வேறு எழுத்துரு அளவுகள் கொண்ட பொருட்கள் (எ.கா., ஒரு துணைத்தலைப்புக்கு அடுத்ததாக ஒரு முக்கிய தலைப்பு) இருக்கும்போது, அவற்றை அவற்றின் பெட்டி எல்லைகளால் மட்டுமல்லாமல், உரை ரீதியாகவும் சீரமைக்க விரும்பும்போது இது மிகவும் பயனுள்ளதாக இருக்கும்.

align-self உடன் மேலெழுதுதல்

ஒரு குறிப்பிட்ட பொருள் மற்றவற்றிலிருந்து வித்தியாசமாக செயல்பட வேண்டும் என்றால் என்ன செய்வது? அங்குதான் align-self வருகிறது. ஒரு தனிப்பட்ட flex பொருளுக்குப் பயன்படுத்தப்படும்போது, அது அந்தப் பொருளுக்கு மட்டும் கண்டெய்னரின் align-items பண்பை மேலெழுதுகிறது. இது align-items (கூடுதலாக `auto`, இது கண்டெய்னரின் மதிப்புக்கு மீட்டமைக்கிறது) போன்ற அனைத்து மதிப்புகளையும் ஏற்றுக்கொள்கிறது.

எடுத்துக்காட்டு: align-items: center உடன் மையப்படுத்தப்பட்ட கார்டுகளின் ஒரு வரிசையை கற்பனை செய்து பாருங்கள். ஒரு "சிறப்பு" கார்டுக்கு align-self: stretch; ஐப் பயன்படுத்துவதன் மூலம் அதை மற்றவற்றை விட உயரமாகக் காட்டி தனித்து நிற்கச் செய்யலாம்.

புகழப்படாத நாயகன்: align-content உடன் மேம்பட்ட விநியோகம்

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

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

இதை இப்படி யோசித்துப் பாருங்கள்:

• align-items பொருட்களை அவற்றின் வரிக்குள் சீரமைக்கிறது.
• align-content வரிகளை கண்டெய்னருக்குள் சீரமைக்கிறது. இது பொருட்களின் வரிசைகளுக்கு இடையில் குறுக்கு அச்சில் உள்ள இடத்தின் விநியோகத்தைக் கட்டுப்படுத்துகிறது.

இது அடிப்படையில் justify-content போலவே செயல்படுகிறது, ஆனால் குறுக்கு அச்சுக்கு. அதன் மதிப்புகள் கிட்டத்தட்ட ஒரே மாதிரியானவை:

• align-content: flex-start; (இயல்புநிலை): அனைத்து வரிகளும் கண்டெய்னரின் தொடக்கத்தில் அடுக்கப்படுகின்றன.
• align-content: flex-end;: அனைத்து வரிகளும் இறுதியில் அடுக்கப்படுகின்றன.
• align-content: center;: அனைத்து வரிகளும் மையத்தில் அடுக்கப்படுகின்றன.
• align-content: space-between;: முதல் வரி தொடக்கத்திலும், கடைசி வரி இறுதியிலும் இருக்கும், மேலும் வரிகளுக்கு இடையில் இடம் சமமாக விநியோகிக்கப்படுகிறது.
• align-content: space-around;: ஒவ்வொரு வரியைச் சுற்றிலும் சமமான இடம் வைக்கப்படுகிறது.
• align-content: space-evenly;: ஒவ்வொரு வரிக்கும் இடையிலான இடைவெளி ஒரே மாதிரியாக இருக்கும்.
• align-content: stretch;: மீதமுள்ள இடத்தை எடுத்துக்கொள்ள வரிகள் நீட்டப்படுகின்றன.

பயன்பாட்டு எடுத்துக்காட்டு: பொருட்கள் மடங்கும் ஒரு புகைப்படக் கேலரியைக் கற்பனை செய்து பாருங்கள். கண்டெய்னருக்கு ஒரு நிலையான உயரம் இருந்தால், கூடுதல் செங்குத்து இடம் மீதமிருக்கலாம். இயல்பாக, இந்த இடம் கீழே தோன்றும். align-content: space-between; அல்லது align-content: center; ஐப் பயன்படுத்துவதன் மூலம், உங்கள் முழு புகைப்படங்களின் கட்டத்தின் செங்குத்து விநியோகத்தைக் கட்டுப்படுத்தலாம், இது மிகவும் தொழில்முறை தோற்றமுடைய லேஅவுட்டை உருவாக்கும்.

டைனமிக் அளவிடுதல் மற்றும் விநியோகம்: flex சுருக்கெழுத்து

நிலையான லேஅவுட்கள் அரிதானவை. Flexbox-இன் உண்மையான சக்தி டைனமிக் உள்ளடக்கம் மற்றும் கிடைக்கும் இடத்தைக் கையாளும் திறனிலிருந்து வருகிறது. இது மூன்று பண்புகளால் கட்டுப்படுத்தப்படுகிறது, பெரும்பாலும் flex சுருக்கெழுத்து வழியாக அமைக்கப்படுகிறது: flex-grow, flex-shrink, மற்றும் flex-basis.

1. flex-basis: தொடக்கப் புள்ளி

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

• ஒரு குறிப்பிட்ட நீளத்திற்கு (எ.கா., 200px அல்லது 10rem) அமைக்கப்பட்டால், அது பொருளின் ஆரம்ப அளவாக மாறும்.
• auto என அமைக்கப்பட்டால், அது பொருளின் `width` அல்லது `height` பண்பைத் தேடும். எதுவும் இல்லை என்றால், அது பொருளின் உள்ளடக்கத்தின் அடிப்படையில் அளவிடும்.
• 0 என அமைக்கப்பட்டால், பொருளுக்கு தொடக்க அளவு இல்லை மற்றும் அதன் இறுதி அளவு அதன் `flex-grow` விகிதத்தால் மட்டுமே தீர்மானிக்கப்படுகிறது.

சிறந்த நடைமுறை: ஒரு flex சூழலில் `width`-க்குப் பதிலாக flex-basis-ஐப் பயன்படுத்துவது பெரும்பாலும் சிறந்தது, ஏனெனில் இது முதன்மை அச்சின் சூழலில் பொருளின் அளவை வரையறுப்பதில் மிகவும் வெளிப்படையானது.

2. flex-grow: நேர்மறை இடத்தைப் பயன்படுத்துதல்

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

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

3. flex-shrink: எதிர்மறை இடத்தைக் கையாளுதல் (வழிதல்)

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

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

flex சுருக்கெழுத்து: அனைத்தையும் ஒன்றாக இணைத்தல்

flex பண்பு என்பது flex-grow, flex-shrink, மற்றும் flex-basis ஆகியவற்றின் சுருக்கெழுத்தாகும், அந்த வரிசையில்.

• flex: 0 1 auto; (இயல்புநிலை): பொருள் வளர முடியாது, சுருங்க முடியும், மற்றும் அதன் அடிப்படை அதன் அகலம்/உயரம் அல்லது உள்ளடக்கத்தால் தீர்மானிக்கப்படுகிறது.
• flex: 1; (flex: 1 1 0; என்பதன் சுருக்கம்): மிகவும் பொதுவான மதிப்பு. பொருள் வளரவும் சுருங்கவும் முடியும், மற்றும் அதன் தொடக்க அளவு 0 ஆகும். இது திறம்பட பொருட்களை அவற்றின் flex-grow விகிதத்தின் அடிப்படையில் மட்டுமே இடத்தைப் பகிர்ந்து கொள்ள வைக்கிறது.
• flex: auto; (flex: 1 1 auto; என்பதன் சுருக்கம்): பொருள் வளரவும் சுருங்கவும் முடியும், மற்றும் அதன் அடிப்படை அதன் உள்ளடக்கத்தால் தீர்மானிக்கப்படுகிறது. இது பொருட்களை அவற்றின் உள்ளடக்கத்தின் அடிப்படையில் வித்தியாசமாக அளவிட அனுமதிக்கிறது, ஆனால் இன்னும் நெகிழ்வாக கூடுதல் இடத்தை உறிஞ்சுகிறது.
• flex: none; (flex: 0 0 auto; என்பதன் சுருக்கம்): பொருள் முற்றிலும் நெகிழ்வற்றது. அது வளரவோ சுருங்கவோ முடியாது.

நடைமுறை பயன்பாட்டு நிகழ்வுகள் மற்றும் மேம்பட்ட சூழல்கள்

சூழல் 1: ஒட்டும் அடிக்குறிப்பு (Sticky Footer - Holy Grail Layout)

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

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Viewport Height */
}

.main-content {
  flex-grow: 1; /* or flex: 1; */
}

முக்கிய பக்க கண்டெய்னரை ஒரு column-based flexbox ஆக மாற்றி, முக்கிய உள்ளடக்கப் பகுதிக்கு flex-grow: 1 என அமைப்பதன் மூலம், அது கிடைக்கக்கூடிய அனைத்து செங்குத்து இடத்தையும் எடுத்துக்கொள்ளும்படி கூறுகிறோம், இது அடிக்குறிப்பை viewport-இன் கீழ் வரை தள்ளுகிறது.

சூழல் 2: குழுக்களைப் பிரிக்க ஆட்டோ மார்ஜின்கள்

இடதுபுறம் ஒரு லோகோ மற்றும் வலதுபுறம் ஒரு இணைப்புக் குழுவுடன் ஒரு நேவிகேஷன் பாரை எப்படி உருவாக்குவது? லோகோ ஒரு தனி flex பொருளாக இருந்தால் justify-content: space-between வேலை செய்யும், ஆனால் வலதுபுறம் பல பொருட்கள் இருந்தால் என்ன செய்வது?

இதற்கு தீர்வு Flexbox-இல் உள்ள ஆட்டோ மார்ஜின்களின் மாயாஜாலம்.

.navbar {
  display: flex;
}

.logo {
  /* No special properties needed */
}

.nav-links {
  margin-left: auto;
}

ஒரு flex கண்டெய்னரில், ஒரு ஆட்டோ மார்ஜின் அது பயன்படுத்தப்படும் திசையில் உள்ள அனைத்து இடத்தையும் பேராசையுடன் எடுத்துக்கொள்ளும். நேவிகேஷன் இணைப்புகளின் குழுவில் margin-left: auto என அமைப்பதன் மூலம், அது லோகோவிற்கும் இணைப்புகளுக்கும் இடையில் ஒரு நெகிழ்வான, காலி இடத்தை உருவாக்கி, இணைப்புகளை வலதுபுறம் வரை தள்ளுகிறது.

சூழல் 3: மீடியா பொருள் (The Media Object)

ஒரு பொதுவான UI பேட்டர்ன் ஒரு பக்கத்தில் ஒரு படம் அல்லது ஐகானையும், மறுபுறம் விளக்க உரையையும் கொண்டுள்ளது. உரை மீதமுள்ள அனைத்து இடத்தையும் எடுத்துக்கொண்டு அழகாக மடிய வேண்டும்.

.media-object {
  display: flex;
  align-items: flex-start; /* Aligns image and text to the top */
}

.media-image {
  margin-right: 1rem;
  flex-shrink: 0; /* Prevents the image from being squished */
}

.media-body {
  flex-grow: 1; /* Takes up all remaining horizontal space */
}

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

முடிவுரை: சீரமைப்பிற்கு அப்பால், நோக்கமுள்ள லேஅவுட்டை நோக்கி

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

அடுத்த முறை நீங்கள் ஒரு சிக்கலான லேஅவுட் சவாலை எதிர்கொள்ளும்போது, floats அல்லது சிக்கலான பொசிஷனிங் ஹேக்குகளை நாடும் தூண்டுதலை எதிர்க்கவும். அதற்கு பதிலாக, உங்களை நீங்களே கேட்டுக்கொள்ளுங்கள்: இதை இடத்தின் நோக்கமுள்ள விநியோகத்துடன் தீர்க்க முடியுமா? பதில், பெரும்பாலும், CSS Flexbox-இன் மேம்பட்ட திறன்களுக்குள் காணப்படும்.