ഫ്ലെക്സ്ബോക്സ് സൈസിംഗ് അൽഗോരിതം വിശദീകരിക്കുന്നു: ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കിയുള്ള ലേഔട്ടുകളിലേക്ക് ഒരു ആഴത്തിലുള്ള பார்வை

ഒരു കൂട്ടം ഐറ്റങ്ങളിൽ flex: 1 ഉപയോഗിക്കുമ്പോൾ, അവ തുല്യമായ കോളങ്ങളാകുമെന്ന് നിങ്ങൾ എപ്പോഴെങ്കിലും പ്രതീക്ഷിച്ചിട്ടുണ്ടോ, എന്നാൽ അവ ഇപ്പോഴും വ്യത്യസ്ത വലുപ്പത്തിലാണെന്ന് കണ്ടെത്തുന്നുണ്ടോ? അല്ലെങ്കിൽ ഒരു ഫ്ലെക്സ് ഐറ്റം ചുരുങ്ങാൻ കൂട്ടാക്കാതെ, നിങ്ങളുടെ ഡിസൈനിനെ തകർക്കുന്ന ഒരു ഓവർഫ്ലോ ഉണ്ടാക്കുന്നത് നിങ്ങളെ ബുദ്ധിമുട്ടിച്ചിട്ടുണ്ടോ? ഈ സാധാരണ പ്രശ്നങ്ങൾ പലപ്പോഴും ഡെവലപ്പർമാരെ ഊഹങ്ങൾക്കും ക്രമരഹിതമായ പ്രോപ്പർട്ടി മാറ്റങ്ങൾക്കും പ്രേരിപ്പിക്കുന്നു. ഇതിന്റെ പരിഹാരം മാന്ത്രികമല്ല, മറിച്ച് യുക്തിയാണ്.

ഈ പ്രശ്നങ്ങളുടെയെല്ലാം ഉത്തരം CSS സ്പെസിഫിക്കേഷനിൽ ആഴത്തിൽക്കിടക്കുന്നു, ഫ്ലെക്സ്ബോക്സ് ഇൻട്രിൻസിക് സൈസിംഗ് അൽഗോരിതം എന്നറിയപ്പെടുന്ന ഒരു പ്രക്രിയയിലാണിത്. ഇതാണ് ഫ്ലെക്സ്ബോക്സിനെ നയിക്കുന്ന ശക്തമായ, ഉള്ളടക്കത്തെ തിരിച്ചറിയുന്ന എഞ്ചിൻ. എന്നാൽ ഇതിന്റെ ആന്തരിക യുക്തി പലപ്പോഴും ഒരു ബ്ലാക്ക് ബോക്സ് പോലെ തോന്നാം. ഈ അൽഗോരിതം മനസ്സിലാക്കുന്നത് ഫ്ലെക്സ്ബോക്സിൽ വൈദഗ്ദ്ധ്യം നേടുന്നതിനും പ്രവചനാതീതവും കരുത്തുറ്റതുമായ യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനും അത്യന്താപേക്ഷിതമാണ്.

ഈ ഗൈഡ് 'ട്രയൽ ആൻഡ് എറർ' എന്ന രീതിയിൽ നിന്ന് ഫ്ലെക്സ്ബോക്സിൽ 'ഉദ്ദേശ്യപൂർവമായ ഡിസൈനി'ലേക്ക് മാറാൻ ആഗ്രഹിക്കുന്ന ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാർക്കുള്ളതാണ്. ഈ ശക്തമായ അൽഗോരിതം നമ്മൾ ഘട്ടം ഘട്ടമായി വിശദീകരിക്കും, അതുവഴി ആശയക്കുഴപ്പങ്ങൾ മാറി വ്യക്തത കൈവരികയും, ഏത് ഉള്ളടക്കത്തിനും ഏത് ഭാഷയിലും പ്രവർത്തിക്കുന്ന കൂടുതൽ ശക്തവും ആഗോളതലത്തിൽ അനുയോജ്യമായതുമായ ലേഔട്ടുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ പ്രാപ്തരാക്കുകയും ചെയ്യും.

ഫിക്സഡ് പിക്സലുകൾക്കപ്പുറം: ഇൻട്രിൻസിക്, എക്സ്ട്രിൻസിക് സൈസിംഗ് തമ്മിലുള്ള വ്യത്യാസം മനസ്സിലാക്കാം

അൽഗോരിതത്തിലേക്ക് കടക്കുന്നതിന് മുൻപ്, CSS ലേഔട്ടിലെ ഒരു അടിസ്ഥാന ആശയം മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്: ഇൻട്രിൻസിക് സൈസിംഗും എക്സ്ട്രിൻസിക് സൈസിംഗും തമ്മിലുള്ള വ്യത്യാസം.

• എക്സ്ട്രിൻസിക് സൈസിംഗ്: ഒരു എലമെന്റിന്റെ വലുപ്പം ഡെവലപ്പർ വ്യക്തമായി നിർവചിക്കുമ്പോഴാണ് ഇത്. width: 500px, height: 50%, അല്ലെങ്കിൽ width: 30rem പോലുള്ള പ്രോപ്പർട്ടികൾ എക്സ്ട്രിൻസിക് സൈസിംഗിന്റെ ഉദാഹരണങ്ങളാണ്. എലമെന്റിന്റെ ഉള്ളടക്കത്തിന് പുറത്തുള്ള ഘടകങ്ങളാണ് വലുപ്പം നിർണ്ണയിക്കുന്നത്.
• ഇൻട്രിൻസിക് സൈസിംഗ്: ഒരു എലമെന്റിന്റെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി ബ്രൗസർ അതിന്റെ വലുപ്പം കണക്കാക്കുമ്പോഴാണ് ഇത്. നീളമുള്ള ടെക്സ്റ്റ് ഉൾക്കൊള്ളാൻ സ്വാഭാവികമായി വീതി കൂടുന്ന ഒരു ബട്ടൺ ഇൻട്രിൻസിക് സൈസിംഗ് ആണ് ഉപയോഗിക്കുന്നത്. എലമെന്റിന് ഉള്ളിലുള്ള ഘടകങ്ങളാണ് വലുപ്പം നിർണ്ണയിക്കുന്നത്.

ഫ്ലെക്സ്ബോക്സ് ഇൻട്രിൻസിക്, അതായത് ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കിയുള്ള സൈസിംഗിൽ ഒരു വിദഗ്ദ്ധനാണ്. നിങ്ങൾ നിയമങ്ങൾ (ഫ്ലെക്സ് പ്രോപ്പർട്ടികൾ) നൽകുമ്പോൾ, ഫ്ലെക്സ് ഐറ്റങ്ങളുടെ ഉള്ളടക്കത്തെയും കണ്ടെയ്‌നറിലെ ലഭ്യമായ സ്ഥലത്തെയും അടിസ്ഥാനമാക്കി ബ്രൗസർ അന്തിമ വലുപ്പ തീരുമാനങ്ങൾ എടുക്കുന്നു. ഇത് തന്നെയാണ് ഫ്ലൂയിഡ്, റെസ്പോൺസീവ് ഡിസൈനുകൾ നിർമ്മിക്കുന്നതിന് ഫ്ലെക്സ്ബോക്സിനെ ഇത്രയും ശക്തമാക്കുന്നത്.

ഫ്ലെക്സിബിലിറ്റിയുടെ മൂന്ന് തൂണുകൾ: `flex-basis`, `flex-grow`, `flex-shrink` എന്നിവയുടെ ഒരു ഓർമ്മപ്പെടുത്തൽ

ഫ്ലെക്സ്ബോക്സ് അൽഗോരിതത്തിന്റെ തീരുമാനങ്ങൾ പ്രധാനമായും മൂന്ന് പ്രോപ്പർട്ടികളാൽ നയിക്കപ്പെടുന്നു, ഇവയെല്ലാം ഒരുമിച്ച് 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` കൊണ്ട് ഗുണിക്കുന്നതിന് ആനുപാതികമാണ്. ഈ നിർണായക വിശദാംശം നമ്മൾ പിന്നീട് ഒരു പ്രായോഗിക ഉദാഹരണത്തിലൂടെ പരിശോധിക്കും.

ഫ്ലെക്സ്ബോക്സ് സൈസിംഗ് അൽഗോരിതം: ഒരു ഘട്ടം ഘട്ടമായുള്ള വിശദീകരണം

ഇനി, ബ്രൗസറിന്റെ ചിന്താ പ്രക്രിയയിലേക്ക് നമുക്ക് കടന്നുചെല്ലാം. ഔദ്യോഗിക W3C സ്പെസിഫിക്കേഷൻ വളരെ സാങ്കേതികവും കൃത്യവുമാണെങ്കിലും, ഒരു ഫ്ലെക്സ് ലൈനിനായുള്ള പ്രധാന യുക്തിയെ നമുക്ക് കൂടുതൽ ലളിതവും ക്രമീകൃതവുമായ ഒരു മാതൃകയിലേക്ക് മാറ്റാം.

ഘട്ടം 1: ഫ്ലെക്സ് ബേസ് വലുപ്പങ്ങളും സാങ്കൽപ്പിക പ്രധാന വലുപ്പങ്ങളും നിർണ്ണയിക്കുക

ആദ്യം, ബ്രൗസറിന് ഓരോ ഐറ്റത്തിനും ഒരു ആരംഭ പോയിന്റ് ആവശ്യമാണ്. കണ്ടെയ്‌നറിലെ ഓരോ ഐറ്റത്തിനും ഫ്ലെക്സ് ബേസ് സൈസ് അത് കണക്കാക്കുന്നു. ഇത് പ്രധാനമായും flex-basis പ്രോപ്പർട്ടിയുടെ മൂല്യത്തെ ആശ്രയിച്ചിരിക്കുന്നു. ഈ ഫ്ലെക്സ് ബേസ് സൈസ് അടുത്ത ഘട്ടങ്ങൾക്കായി ഐറ്റത്തിന്റെ 'സാങ്കൽപ്പിക പ്രധാന വലുപ്പമായി' മാറുന്നു. സഹോദര ഐറ്റങ്ങളുമായി യാതൊരു ചർച്ചയും നടത്തുന്നതിന് മുൻപ് ഐറ്റം *ആഗ്രഹിക്കുന്ന* വലുപ്പമാണിത്.

ഘട്ടം 2: ഫ്ലെക്സ് കണ്ടെയ്‌നറിന്റെ പ്രധാന വലുപ്പം നിർണ്ണയിക്കുക

അടുത്തതായി, ബ്രൗസർ ഫ്ലെക്സ് കണ്ടെയ്‌നറിന്റെ തന്നെ മെയിൻ ആക്സിസിലെ വലുപ്പം കണ്ടെത്തുന്നു. ഇത് നിങ്ങളുടെ CSS-ൽ നിന്നുള്ള ഒരു നിശ്ചിത വീതിയാകാം, അതിന്റെ പാരന്റിന്റെ ഒരു ശതമാനമാകാം, അല്ലെങ്കിൽ അതിൻ്റെ സ്വന്തം ഉള്ളടക്കത്താൽ ഇൻട്രിൻസിക്കായി വലുപ്പം നിർണ്ണയിച്ചതാകാം. ഈ അന്തിമവും ഉറപ്പായതുമായ വലുപ്പമാണ് ഫ്ലെക്സ് ഐറ്റങ്ങൾക്ക് ഉപയോഗിക്കാൻ ലഭ്യമായ 'ബജറ്റ്'.

ഘട്ടം 3: ഫ്ലെക്സ് ഐറ്റങ്ങളെ ഫ്ലെക്സ് ലൈനുകളിലേക്ക് ശേഖരിക്കുക

അതിനുശേഷം ഐറ്റങ്ങളെ എങ്ങനെ ഗ്രൂപ്പ് ചെയ്യണമെന്ന് ബ്രൗസർ തീരുമാനിക്കുന്നു. flex-wrap: nowrap (ഡിഫോൾട്ട്) ആണെങ്കിൽ, എല്ലാ ഐറ്റങ്ങളെയും ഒരു ലൈനിന്റെ ഭാഗമായി കണക്കാക്കുന്നു. flex-wrap: wrap അല്ലെങ്കിൽ wrap-reverse സജീവമാണെങ്കിൽ, ബ്രൗസർ ഐറ്റങ്ങളെ ഒന്നോ അതിലധികമോ ലൈനുകളിലായി വിതരണം ചെയ്യുന്നു. അതിനുശേഷം അൽഗോരിതത്തിന്റെ ബാക്കി ഭാഗം ഓരോ ലൈനിലെയും ഐറ്റങ്ങൾക്ക് സ്വതന്ത്രമായി പ്രയോഗിക്കുന്നു.

ഘട്ടം 4: ഫ്ലെക്സിബിൾ ലെങ്ത്സ് നിർണ്ണയിക്കുക (പ്രധാന യുക്തി)

യഥാർത്ഥ വലുപ്പ നിർണ്ണയവും വിതരണവും നടക്കുന്ന അൽഗോരിതത്തിന്റെ ഹൃദയഭാഗമാണിത്. ഇതൊരു രണ്ട് ഭാഗങ്ങളുള്ള പ്രക്രിയയാണ്.

ഭാഗം 4a: ഫ്രീ സ്പേസ് കണക്കാക്കുക

ഒരു ഫ്ലെക്സ് ലൈനിനുള്ളിൽ ലഭ്യമായ മൊത്തം ഫ്രീ സ്പേസ് ബ്രൗസർ കണക്കാക്കുന്നു. കണ്ടെയ്‌നറിന്റെ പ്രധാന വലുപ്പത്തിൽ (ഘട്ടം 2-ൽ നിന്ന്) നിന്ന് എല്ലാ ഐറ്റങ്ങളുടെയും ഫ്ലെക്സ് ബേസ് വലുപ്പങ്ങളുടെ ആകെത്തുക (ഘട്ടം 1-ൽ നിന്ന്) കുറച്ചാണ് ഇത് ചെയ്യുന്നത്.

ഫ്രീ സ്പേസ് = കണ്ടെയ്‌നറിന്റെ പ്രധാന വലുപ്പം - എല്ലാ ഐറ്റങ്ങളുടെയും ഫ്ലെക്സ് ബേസ് വലുപ്പങ്ങളുടെ ആകെത്തുക

ഈ ഫലം ഇങ്ങനെയൊക്കെയാകാം:

• പോസിറ്റീവ്: കണ്ടെയ്‌നറിന് ഐറ്റങ്ങൾക്ക് ആവശ്യമുള്ളതിലും കൂടുതൽ സ്ഥലമുണ്ട്. ഈ അധിക സ്ഥലം flex-grow ഉപയോഗിച്ച് വിതരണം ചെയ്യും.
• നെഗറ്റീവ്: ഐറ്റങ്ങൾ എല്ലാംകൂടി കണ്ടെയ്‌നറിനേക്കാൾ വലുതാണ്. ഈ സ്ഥലക്കുറവ് (ഒരു ഓവർഫ്ലോ) അർത്ഥമാക്കുന്നത് ഐറ്റങ്ങൾ അവയുടെ flex-shrink മൂല്യങ്ങൾക്കനുസരിച്ച് ചുരുങ്ങണം എന്നാണ്.
• പൂജ്യം: ഐറ്റങ്ങൾ കൃത്യമായി യോജിക്കുന്നു. വലുതാക്കുകയോ ചുരുക്കുകയോ ചെയ്യേണ്ടതില്ല.

ഭാഗം 4b: ഫ്രീ സ്പേസ് വിതരണം ചെയ്യുക

ഇനി, കണക്കാക്കിയ ഫ്രീ സ്പേസ് ബ്രൗസർ വിതരണം ചെയ്യുന്നു. ഇതൊരു ആവർത്തന പ്രക്രിയയാണ്, പക്ഷെ നമുക്ക് അതിന്റെ യുക്തി ഇങ്ങനെ സംഗ്രഹിക്കാം:

• ഫ്രീ സ്പേസ് പോസിറ്റീവ് ആണെങ്കിൽ (വലുതാകുമ്പോൾ):
  1. ലൈനിലെ ഐറ്റങ്ങളുടെ എല്ലാ flex-grow ഘടകങ്ങളും ബ്രൗസർ കൂട്ടുന്നു.
  2. അതിനുശേഷം അത് പോസിറ്റീവ് ഫ്രീ സ്പേസ് ഓരോ ഐറ്റത്തിനും ആനുപാതികമായി വിതരണം ചെയ്യുന്നു. ഒരു ഐറ്റത്തിന് ലഭിക്കുന്ന സ്ഥലത്തിന്റെ അളവ് ഇതാണ്: (ഐറ്റത്തിന്റെ flex-grow / എല്ലാ flex-grow ഘടകങ്ങളുടെയും ആകെത്തുക) * പോസിറ്റീവ് ഫ്രീ സ്പേസ്.
  3. ഒരു ഐറ്റത്തിന്റെ അന്തിമ വലുപ്പം അതിന്റെ flex-basis-നോടൊപ്പം വിതരണം ചെയ്ത സ്ഥലത്തിന്റെ പങ്കും ചേർന്നതാണ്. ഈ വളർച്ച ഐറ്റത്തിന്റെ max-width അല്ലെങ്കിൽ max-height പ്രോപ്പർട്ടി വഴി പരിമിതപ്പെടുത്തിയിരിക്കുന്നു.
• ഫ്രീ സ്പേസ് നെഗറ്റീവ് ആണെങ്കിൽ (ചുരുങ്ങുമ്പോൾ):
  1. ഇതാണ് കൂടുതൽ സങ്കീർണ്ണമായ ഭാഗം. ഓരോ ഐറ്റത്തിനും, ബ്രൗസർ അതിന്റെ ഫ്ലെക്സ് ബേസ് വലുപ്പത്തെ flex-shrink മൂല്യം കൊണ്ട് ഗുണിച്ച് ഒരു വെയ്റ്റഡ് ഷ്രിങ്ക് ഫാക്ടർ കണക്കാക്കുന്നു: വെയ്റ്റഡ് ഷ്രിങ്ക് ഫാക്ടർ = ഫ്ലെക്സ് ബേസ് സൈസ് * 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-basis-നെ അതിന്റെ ഡിഫോൾട്ട് മൂല്യമായ auto-യിൽ വിട്ടിട്ട് flex-grow: 1 മാത്രം സജ്ജമാക്കുമ്പോഴോ ആണ് ഇത് സംഭവിക്കുന്നത്. അൽഗോരിതം അനുസരിച്ച്, 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 വലുപ്പം ഗണ്യമായി വർദ്ധിപ്പിക്കുന്നു. ആ എലമെന്റ് ഒരു ഫ്ലെക്സ് ഐറ്റം ആണെങ്കിൽ, നിങ്ങൾ ചെറിയ ഇംഗ്ലീഷ് ടെക്സ്റ്റ് ഉപയോഗിച്ച് ലേഔട്ട് ഡിസൈൻ ചെയ്തപ്പോൾ പ്രതീക്ഷിക്കാത്ത രീതിയിൽ അത് ചുരുങ്ങുന്നതിനെ പ്രതിരോധിച്ചേക്കാം. അതുപോലെ, ജാപ്പനീസ് അല്ലെങ്കിൽ ചൈനീസ് പോലുള്ള ചില ഭാഷകളിൽ വാക്കുകൾക്കിടയിൽ സ്പേസ് ഉണ്ടാകണമെന്നില്ല, ഇത് റാപ്പിംഗും സൈസിംഗും എങ്ങനെ കണക്കാക്കപ്പെടുന്നു എന്നതിനെ ബാധിക്കുന്നു. എല്ലാവർക്കും, എല്ലായിടത്തും പ്രവർത്തിക്കാൻ തക്ക കരുത്തുള്ള ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് ഇൻട്രിൻസിക് അൽഗോരിതം മനസ്സിലാക്കേണ്ടത് എന്തുകൊണ്ട് നിർണായകമാണ് എന്നതിന്റെ മികച്ച ഉദാഹരണമാണിത്.

പ്രകടനത്തെക്കുറിച്ചുള്ള കുറിപ്പുകൾ

ഫ്ലെക്സ് ഐറ്റങ്ങളുടെ ഇൻട്രിൻസിക് വലുപ്പങ്ങൾ കണക്കാക്കാൻ ബ്രൗസറിന് അവയുടെ ഉള്ളടക്കം അളക്കേണ്ടതിനാൽ, ഒരു കമ്പ്യൂട്ടേഷണൽ ചെലവുണ്ട്. മിക്ക വെബ്സൈറ്റുകൾക്കും ആപ്ലിക്കേഷനുകൾക്കും, ഈ ചെലവ് നിസ്സാരമാണ്, അതിനെക്കുറിച്ച് വിഷമിക്കേണ്ടതില്ല. എന്നിരുന്നാലും, ആയിരക്കണക്കിന് എലമെന്റുകളുള്ള വളരെ സങ്കീർണ്ണവും ആഴത്തിൽ നെസ്റ്റ് ചെയ്തതുമായ യുഐകളിൽ, ഈ ലേഔട്ട് കണക്കുകൂട്ടലുകൾ ഒരു പ്രകടന തടസ്സമായി മാറിയേക്കാം. അത്തരം വിപുലമായ കേസുകളിൽ, ഡെവലപ്പർമാർ റെൻഡറിംഗ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് contain: layout അല്ലെങ്കിൽ content-visibility പോലുള്ള CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ചേക്കാം, പക്ഷേ ഇത് മറ്റൊരു ദിവസത്തെ വിഷയമാണ്.

പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ചകൾ: നിങ്ങളുടെ ഫ്ലെക്സ്ബോക്സ് സൈസിംഗ് ചീറ്റ് ഷീറ്റ്

ചുരുക്കത്തിൽ, നിങ്ങൾക്ക് ഉടൻ പ്രയോഗിക്കാൻ കഴിയുന്ന പ്രധാന കാര്യങ്ങൾ ഇതാ:

• യഥാർത്ഥ തുല്യ വീതിയുള്ള കോളങ്ങൾക്ക്: എപ്പോഴും 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 ഉപയോഗിക്കുന്നത് ഉള്ളടക്കത്തിന്റെ വലുപ്പത്തെ ആശ്രയിക്കാൻ സഹായിക്കുന്നു; ഒരു പ്രത്യേക മൂല്യം ഉപയോഗിക്കുന്നത് നിങ്ങൾക്ക് വ്യക്തമായ നിയന്ത്രണം നൽകുന്നു.
• ബ്രൗസറിനെപ്പോലെ ചിന്തിക്കുക: ഘട്ടങ്ങൾ മനസ്സിൽ കാണുക. ആദ്യം, ബേസ് വലുപ്പങ്ങൾ നേടുക. തുടർന്ന്, ഫ്രീ സ്പേസ് (പോസിറ്റീവ് അല്ലെങ്കിൽ നെഗറ്റീവ്) കണക്കാക്കുക. അവസാനമായി, ഗ്രോ/ഷ്രിങ്ക് നിയമങ്ങൾക്കനുസരിച്ച് ആ സ്ഥലം വിതരണം ചെയ്യുക.

ഉപസംഹാരം

സിഎസ്എസ് ഫ്ലെക്സ്ബോക്സ് സൈസിംഗ് അൽഗോരിതം യാദൃശ്ചികമായ ഒരു മാന്ത്രികവിദ്യയല്ല; അത് വ്യക്തമായി നിർവചിക്കപ്പെട്ടതും യുക്തിസഹവും അവിശ്വസനീയമാംവിധം ശക്തവുമായ ഒരു ഉള്ളടക്ക-അധിഷ്ഠിത സംവിധാനമാണ്. ലളിതമായ പ്രോപ്പർട്ടി-മൂല്യ ജോഡികൾക്കപ്പുറം കടന്നുപോയി അടിസ്ഥാന പ്രക്രിയ മനസ്സിലാക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് ലേഔട്ടുകളെ ആത്മവിശ്വാസത്തോടും കൃത്യതയോടും കൂടി പ്രവചിക്കാനും ഡീബഗ് ചെയ്യാനും രൂപകൽപ്പന ചെയ്യാനും കഴിയും.

അടുത്ത തവണ ഒരു ഫ്ലെക്സ് ഐറ്റം തെറ്റായി പ്രവർത്തിക്കുമ്പോൾ, നിങ്ങൾക്ക് ഊഹിക്കേണ്ട ആവശ്യമില്ല. നിങ്ങൾക്ക് അൽഗോരിതത്തിലൂടെ മാനസികമായി കടന്നുപോകാം: `flex-basis` പരിശോധിക്കുക, ഉള്ളടക്കത്തിന്റെ ഇൻട്രിൻസിക് വലുപ്പം പരിഗണിക്കുക, ഫ്രീ സ്പേസ് വിശകലനം ചെയ്യുക, `flex-grow` അല്ലെങ്കിൽ `flex-shrink`-ന്റെ നിയമങ്ങൾ പ്രയോഗിക്കുക. ലോകത്ത് എവിടെ നിന്ന് വന്നാലും, ഉള്ളടക്കത്തിന്റെ ചലനാത്മക സ്വഭാവവുമായി മനോഹരമായി പൊരുത്തപ്പെടുന്ന, മനോഹരവും അതേസമയം കരുത്തുറ്റതുമായ യുഐകൾ നിർമ്മിക്കാനുള്ള അറിവ് നിങ്ങൾക്കിപ്പോൾ ഉണ്ട്.