ഫ്ലെക്സ്ബോക്സ് ജനറേറ്റർ
വിഷ്വൽ കൺട്രോളുകൾ ഉപയോഗിച്ച് ഒരു ഫ്ലെക്സ് കണ്ടെയ്നറും അതിന്റെ ഐറ്റങ്ങളും സജ്ജമാക്കുക, ലേഔട്ട് തത്സമയം മാറുന്നത് കാണുക, ഒറ്റ ക്ലിക്കിൽ CSS പകർപ്പ് ചെയ്യുക.
നിങ്ങളുടെ ലേഔട്ട് നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെയാണ് നിർമ്മിക്കുന്നത്. നിങ്ങൾ ഇവിടെ സജ്ജീകരിക്കുന്നതൊന്നും BroBroGo-ലേക്ക് അപ്ലോഡ് ചെയ്യില്ല.
പതിവ് ചോദ്യങ്ങൾ
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) മാർജിനുകൾ ഇല്ലാതെ ഐറ്റങ്ങൾക്കിടയിലും വരികൾക്കിടയിലും ഇടം സജ്ജമാക്കുന്നു.