CSS ഫ്ലെക്സ്ബോക്സ് ലേഔട്ടുകളുടെ ഘടന
വെബ് ഡിസൈനിൽ ലേഔട്ടുകൾ എളുപ്പത്തിൽ നിർമ്മിക്കുന്നതിനായി ഉപയോഗിക്കുന്ന ശക്തമായ ഒരു സിസ്റ്റമാണ് CSS ഫ്ലെക്സ്ബോക്സ് (Flexbox). ഒരു ഫ്ലെക്സ് കണ്ടെയ്നറും അതിനുള്ളിലെ ഐറ്റങ്ങളും തമ്മിലുള്ള ബന്ധത്തെ അടിസ്ഥാനമാക്കിയാണ് ഇത് പ്രവർത്തിക്കുന്നത്. ഈ ലേഔട്ട് സിസ്റ്റം ഉപയോഗിച്ച് ഘടകങ്ങളെ കൃത്യമായ ദിശയിലാക്കാനും, അവയുടെ വലിപ്പം ക്രമീകരിക്കാനും, സ്ക്രീനിലെ ലഭ്യമായ സ്ഥലം കാര്യക്ഷമമായി വിഭജിക്കാനും സാധിക്കും.
ഫ്ലെക്സ്ബോക്സ് ജനറേറ്റർ ഉപയോഗിച്ച് ഉപയോക്താക്കൾക്ക് ഒരു ഫ്ലെക്സ് കണ്ടെയ്നറും അതിന്റെ ഐറ്റങ്ങളും വിഷ്വലായി സജ്ജീകരിക്കാൻ സാധിക്കുന്നു. ഈ ടൂളിലെ കൺട്രോളുകൾ മാറ്റുന്നതിലൂടെ ലേഔട്ടിൽ വരുന്ന മാറ്റങ്ങൾ തത്സമയം കാണാനും, അതിനുശേഷം ഡിസൈനിലേക്ക് ആവശ്യമായ CSS കോഡ് നേരിട്ട് പകർത്തിയെടുക്കാനും സാധിക്കും.
കണ്ടെയ്നർ പ്രോപ്പർട്ടികൾ മനസ്സിലാക്കാം
ഒരു ഫ്ലെക്സ് ലേഔട്ടിന്റെ അടിസ്ഥാനം അതിന്റെ പാരന്റ് എലമെന്റ് അഥവാ ഫ്ലെക്സ് കണ്ടെയ്നർ ആണ്. കണ്ടെയ്നറിന് നൽകുന്ന പ്രോപ്പർട്ടികൾ അതിനുള്ളിലെ എല്ലാ ഐറ്റങ്ങളുടെയും പൊതുവായ വിന്യാസത്തെയും ദിശയെയും നിയന്ത്രിക്കുന്നു.
| പ്രോപ്പർട്ടി | ലഭ്യമായ ഓപ്ഷനുകൾ | ലേഔട്ടിലെ സ്വാധീനം |
|---|---|---|
| ദിശ (Direction) | റോ (Row), റോ റിവേഴ്സ്, കോളം (Column), കോളം റിവേഴ്സ് | ഐറ്റങ്ങൾ ഏത് അച്ചുതണ്ടിലൂടെ വിന്യസിക്കണമെന്ന് നിശ്ചയിക്കുന്നു. |
| wrap | നോ റാപ്പ്, റാപ്പ്, റാപ്പ് റിവേഴ്സ് | ഐറ്റങ്ങൾ ഒരൊറ്റ വരിയിൽ ഒതുക്കണോ അതോ അടുത്ത വരികളിലേക്ക് മാറ്റണോ എന്ന് തീരുമാനിക്കുന്നു. |
| ജസ്റ്റിഫൈ കണ്ടെന്റ് (Justify content) | സ്റ്റാർട്ട്, എൻഡ്, സെന്റർ, സ്പേസ് ബിറ്റ്വീൻ, സ്പേസ് എറൗണ്ട്, സ്പേസ് ഈവൻലി | പ്രധാന അച്ചുതണ്ടിലെ (main axis) ഐറ്റങ്ങളുടെ വിന്യാസം ക്രമീകരിക്കുന്നു. |
| അലൈൻ ഐറ്റംസ് (Align items) (Align items) | സ്റ്റാർട്ട്, എൻഡ്, സെന്റർ, സ്ട്രെച്ച്, ബേസ്ലൈൻ | ക്രോസ് അച്ചുതണ്ടിലെ (cross axis) ഐറ്റങ്ങളുടെ വിന്യാസം ക്രമീകരിക്കുന്നു. |
| അലൈൻ കണ്ടെന്റ് (Align content) | സ്റ്റാർട്ട്, എൻഡ്, സെന്റർ, സ്ട്രെച്ച്, സ്പേസ് ബിറ്റ്വീൻ, സ്പേസ് എറൗണ്ട്, സ്പേസ് ഈവൻലി | ഒന്നിലധികം വരികളുള്ളപ്പോൾ ആ വരികൾ തമ്മിലുള്ള അകലം ക്രമീകരിക്കുന്നു. |
| ഗ്യാപ്പ് | സംഖ്യാ മൂല്യം | ഐറ്റങ്ങൾക്കിടയിലും വരികൾക്കിടയിലുമുള്ള കൃത്യമായ ഇടം നിശ്ചയിക്കുന്നു. |
പ്രധാന അച്ചുതണ്ടും ക്രോസ് അച്ചുതണ്ടും തമ്മിലുള്ള ബന്ധം
ഫ്ലെക്സ്ബോക്സിന്റെ പ്രവർത്തനത്തിൽ ഏറ്റവും പ്രധാനപ്പെട്ട ഒന്നാണ് പ്രധാന അച്ചുതണ്ടും (main axis) ക്രോസ് അച്ചുതണ്ടും (cross axis) തമ്മിലുള്ള ബന്ധം.
- റോ (Row) ദിശയിൽ: ദിശ റോ (Row) ആയിരിക്കുമ്പോൾ പ്രധാന അച്ചുതണ്ട് ഇടത്തുനിന്ന് വലത്തോട്ടും, ക്രോസ് അച്ചുതണ്ട് മുകളിൽ നിന്ന് താഴോട്ടുമായിരിക്കും. ഈ സാഹചര്യത്തിൽ
justify-contentഇടത്തുനിന്ന് വലത്തോട്ടുള്ള വിന്യാസത്തെയുംalign-itemsമുകളിൽ നിന്ന് താഴോട്ടുള്ള വിന്യാസത്തെയും നിയന്ത്രിക്കുന്നു. - കോളം (Column) ദിശയിൽ: ദിശ കോളത്തിലേക്ക് മാറ്റുമ്പോൾ പ്രധാന അച്ചുതണ്ടും ക്രോസ് അച്ചുതണ്ടും പരസ്പരം മാറുന്നു. ഇതോടെ
justify-contentമുകളിൽ നിന്ന് താഴോട്ടുള്ള വിന്യാസത്തെയുംalign-itemsഇടത്തുനിന്ന് വലത്തോട്ടുള്ള വിന്യാസത്തെയും നിയന്ത്രിക്കാൻ തുടങ്ങുന്നു.
ഫ്ലെക്സ് ഐറ്റങ്ങളുടെ പ്രോപ്പർട്ടികൾ
കണ്ടെയ്നറിനുള്ളിലെ ഓരോ ചൈൽഡ് എലമെന്റിനെയും (ഫ്ലെക്സ് ഐറ്റങ്ങൾ) വ്യക്തിഗതമായി നിയന്ത്രിക്കാൻ പ്രത്യേക പ്രോപ്പർട്ടികൾ ലഭ്യമാണ്. ടൂളിൽ "ഐറ്റം ചേർക്കുക" ക്ലിക്ക് ചെയ്യുമ്പോൾ പുതിയ ഐറ്റങ്ങൾ (ഉദാഹരണത്തിന് "Item 5") ലേഔട്ടിലേക്ക് കൂട്ടിച്ചേർക്കപ്പെടുന്നു.
- ഓർഡർ: HTML കോഡിൽ മാറ്റം വരുത്താതെ തന്നെ സ്ക്രീനിൽ ഐറ്റങ്ങൾ കാണിക്കേണ്ട മുൻഗണനാ ക്രമം നിശ്ചയിക്കാൻ ഒരു സംഖ്യാ മൂല്യം നൽകാം.
- ഗ്രോ (Grow): കണ്ടെയ്നറിൽ അധികമായി ലഭ്യമായ സ്ഥലം പങ്കിട്ടെടുത്ത് ഐറ്റം എത്രത്തോളം വളരണമെന്ന് ഈ സംഖ്യാ മൂല്യം നിശ്ചയിക്കുന്നു.
- ഷ്രിങ്ക് (Shrink): സ്ഥലം പരിമിതമായിരിക്കുമ്പോൾ മറ്റ് ഐറ്റങ്ങളെ അപേക്ഷിച്ച് ഈ ഐറ്റം എത്രത്തോളം ചുരുങ്ങണമെന്ന് ഇത് തീരുമാനിക്കുന്നു.
- ബേസിസ് (Basis): ഒരു ഐറ്റത്തിന്റെ പ്രാരംഭ വലിപ്പം നിശ്ചയിക്കുന്നു. ഇതിനായി ഒരു സംഖ്യാ മൂല്യമോ അല്ലെങ്കിൽ "ഓട്ടോ ബേസിസ്" ഓപ്ഷനോ നൽകാം.
- അലൈൻ സെൽഫ് (Align self): കണ്ടെയ്നറിന്റെ പൊതുവായ അലൈൻമെന്റിൽ നിന്ന് മാറി ഒരു പ്രത്യേക ഐറ്റത്തിന് മാത്രം ക്രോസ് അച്ചുതണ്ടിൽ സ്വന്തമായി വിന്യാസം നൽകാൻ ഇത് സഹായിക്കുന്നു (ഓട്ടോ, സ്റ്റാർട്ട്, എൻഡ്, സെന്റർ, സ്ട്രെച്ച്, ബേസ്ലൈൻ).
മൾട്ടി-ലൈൻ ലേഔട്ടുകളും റാപ്പിംഗും
കണ്ടെയ്നറിലെ ഐറ്റങ്ങളുടെ എണ്ണം കൂടുകയോ സ്ക്രീൻ ചെറുതാവുകയോ ചെയ്യുമ്പോൾ ലേഔട്ട് ക്രമീകരിക്കുന്നതിൽ റാപ്പിംഗ് പ്രധാന പങ്ക് വഹിക്കുന്നു.
- നോ റാപ്പ് (No wrap): ഈ അവസ്ഥയിൽ എല്ലാ ഐറ്റങ്ങളും ഒരൊറ്റ വരിയിലായിരിക്കാൻ നിർബന്ധിതമാകുന്നു. ഇത് ചിലപ്പോൾ ഐറ്റങ്ങൾ കണ്ടെയ്നറിന് പുറത്തേക്ക് പോകാനോ കൂടുതൽ ഇടുങ്ങിപ്പോകാനോ കാരണമായേക്കാം.
- റാപ്പ് (Wrap): ഈ ഓപ്ഷൻ സജീവമാക്കുമ്പോൾ, കണ്ടെയ്നറിൽ കൊള്ളാത്ത ഐറ്റങ്ങൾ സ്വയമേവ അടുത്ത വരിയിലേക്ക് മാറുന്നു.
- അലൈൻ കണ്ടെന്റ് (Align content) പ്രവർത്തനം: റാപ്പിംഗ് ഓൺ ആയിരിക്കുമ്പോൾ മാത്രമേ
align-contentപ്രോപ്പർട്ടിക്ക് പ്രാധാന്യമുള്ളൂ. ഒന്നിലധികം വരികളായി മാറുന്ന ഐറ്റങ്ങളെ ഒരു ഗ്രൂപ്പായി ക്രോസ് അച്ചുതണ്ടിൽ വിന്യസിക്കാൻ ഇത് സഹായിക്കുന്നു. - ഗ്യാപ്പ് (Gap): മാർജിനുകൾ ഉപയോഗിക്കാതെ തന്നെ ഐറ്റങ്ങൾക്കിടയിലും വരികൾക്കിടയിലും കൃത്യമായ അകലം നിലനിർത്താൻ ഗ്യാപ്പ് സഹായിക്കുന്നു.
സാധാരണയായി ഉപയോഗിക്കുന്ന ലേഔട്ട് മാതൃകകൾ
ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ച് വെബ്സൈറ്റുകളിൽ സാധാരണയായി കാണാറുള്ള ചില പ്രധാന ലേഔട്ടുകൾ എളുപ്പത്തിൽ നിർമ്മിക്കാൻ സാധിക്കും:
- സെന്റർ: ഒരു ഘടകത്തെ ലേഔട്ടിന്റെ കൃത്യം നടുവിലായി വിന്യസിക്കാൻ ഇത് സഹായിക്കുന്നു.
- നാവ്ബാർ: വെബ്സൈറ്റുകളുടെ മുകളിലെ നാവിഗേഷൻ ബാറുകളിൽ ലിങ്കുകളും ലോഗോയും കൃത്യമായ അകലത്തിൽ ക്രമീകരിക്കാൻ ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിക്കുന്നു.
- സ്റ്റാക്ക്: ഘടകങ്ങളെ ഒന്നിനു താഴെ ഒന്നായി കൃത്യമായ ക്രമത്തിൽ അടുക്കിവെക്കാൻ ഇത് സഹായിക്കുന്നു.
- കാർഡുകൾ: റെസ്പോൺസീവ് ഗ്രിഡ് രൂപത്തിൽ വിവരങ്ങൾ അടങ്ങിയ കാർഡുകൾ നിരത്തിവെക്കാൻ ഇത് ഉപയോഗപ്രദമാണ്.
- സൈഡ്ബാർ: പ്രധാന ഉള്ളടക്കത്തിനൊപ്പം ഒരു വശത്തായി സൈഡ്ബാർ ലേഔട്ടുകൾ നിർമ്മിക്കാൻ ഇത് സഹായിക്കുന്നു.
ഡാറ്റാ പ്രോസസ്സിംഗും സ്വകാര്യതയും
നിങ്ങളുടെ ലേഔട്ട് നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെയാണ് നിർമ്മിക്കുന്നത്. നിങ്ങൾ ഇവിടെ സജ്ജീകരിക്കുന്നതൊന്നും അപ്ലോഡ് ചെയ്യില്ല.
പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ (FAQ)
justify-content-ഉം align-items-ഉം തമ്മിലുള്ള വ്യത്യാസം എന്താണ്?
Justify-content ഐറ്റങ്ങളെ പ്രധാന അച്ചുതണ്ടിലൂടെ (main axis) — അതായത് റോ അല്ലെങ്കിൽ കോളം ഒഴുകുന്ന ദിശയിൽ — വിന്യസിക്കുന്നു, അതേസമയം align-items അവയെ മറ്റേ അച്ചുതണ്ടിലൂടെ വിന്യസിക്കുന്നു. ദിശ റോയിൽ നിന്ന് കോളത്തിലേക്ക് മാറ്റുമ്പോൾ രണ്ട് അച്ചുതണ്ടുകളും പരസ്പരം മാറുന്നു, അതിനാൽ justify-content മുകളിൽ നിന്ന് താഴോട്ടും align-items ഇടത്തുനിന്ന് വലത്തോട്ടും പ്രവർത്തിക്കാൻ തുടങ്ങുന്നു.
ഓരോ ഐറ്റത്തിനുമുള്ള നിയന്ത്രണങ്ങൾ എങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്?
ഒരു ഐറ്റം അതിന്റെ നമ്പർ അനുസരിച്ച് തിരഞ്ഞെടുക്കുക, തുടർന്ന് ബാക്കിയുള്ള സ്ഥലം നികത്താൻ അത് എത്രത്തോളം വളരണം (grow), സ്ഥലം കുറവായിരിക്കുമ്പോൾ എത്രത്തോളം ചുരുങ്ങണം (shrink), അതിന്റെ പ്രാരംഭ വലുപ്പം (basis), അതിന്റെ സ്വന്തം ക്രോസ്-ആക്സിസ് അലൈൻമെന്റ് എന്നിവ സജ്ജമാക്കുക. ഓർഡർ (order) HTML മാറ്റാതെ തന്നെ സ്ക്രീനിൽ ഒരു ഐറ്റത്തെ മുന്നോട്ടോ പിന്നോട്ടോ നീക്കുന്നു. നിങ്ങൾ യഥാർത്ഥത്തിൽ മാറ്റുന്ന ഐറ്റങ്ങൾക്ക് മാത്രമേ CSS-ൽ സ്വന്തം റൂൾ ലഭിക്കൂ.
എപ്പോഴാണ് wrap-ഉം align-content-ഉം പ്രാധാന്യമുള്ളതാകുന്നത്?
റാപ്പിംഗ് ഓഫ് ചെയ്യുമ്പോൾ, ഓരോ ഐറ്റവും ഒരൊറ്റ വരിയിലാക്കാൻ നിർബന്ധിതമാവുകയും കൂടുതൽ ഇടുങ്ങിയതാകുകയും ചെയ്യാം. ഇത് ഓൺ ചെയ്താൽ, കൊള്ളാത്ത ഐറ്റങ്ങൾ അടുത്ത വരിയിലേക്ക് പോകും — ആ സമയത്താണ് align-content നിയന്ത്രണം ഏറ്റെടുക്കുന്നത്, വരികളെ ഒരു ഗ്രൂപ്പായി വിന്യസിക്കുന്നു. ഗ്യാപ്പ് (gap) മാർജിനുകൾ ഇല്ലാതെ ഐറ്റങ്ങൾക്കിടയിലും വരികൾക്കിടയിലും ഇടം സജ്ജമാക്കുന്നു.
ജനറേറ്റ് ചെയ്ത CSS കോഡ് എങ്ങനെയാണ് ലഭിക്കുന്നത്?
നിങ്ങൾ ലേഔട്ടിൽ വരുത്തുന്ന മാറ്റങ്ങൾക്ക് അനുസരിച്ച് CSS കോഡ് തത്സമയം ജനറേറ്റ് ചെയ്യപ്പെടുന്നു. "CSS പകർപ്പ്" എന്ന ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുന്നതോടെ കോഡ് ക്ലിപ്പ്ബോർഡിലേക്ക് പകർക്കപ്പെടുകയും ബട്ടണിന്റെ അവസ്ഥ "Copied" എന്ന് മാറുകയും ചെയ്യും. മാറ്റങ്ങൾ വരുത്തിയ ഐറ്റങ്ങളുടെ CSS റൂളുകൾ മാത്രമേ കോഡിൽ ഉൾപ്പെടുത്തുകയുള്ളൂ.