CSS Flexbox എന്താണ്?
CSS Flexbox (Flexible Box Layout) ഒരു വരിയിലോ നിരയിലോ ഇനങ്ങൾ ക്രമീകരിക്കാനും സ്ഥലം വിതരണം ചെയ്യാനുമുള്ള ഒരു-മാനം ലേഔട്ട് മോഡലാണ്. flex കണ്ടെയ്നർ display: flex ഉപയോഗിച്ച് നിർവ്വചിക്കുന്നു, അതിന്റെ നേരിട്ടുള്ള കുട്ടികൾ flex ഇനങ്ങളാകുന്നു. പ്രധാന കണ്ടെയ്നർ ഗുണങ്ങൾ: flex-direction (വരി അല്ലെങ്കിൽ നിര), flex-wrap (ഒറ്റ vs. ഒന്നിലധികം-വരി), justify-content (പ്രധാന-അക്ഷ ക്രമീകരണം), align-items (ഓരോ വരിക്കും ക്രോസ്-അക്ഷ ക്രമീകരണം), align-content (ഒന്നിലധികം വരികളുടെ ക്രോസ്-അക്ഷ ക്രമീകരണം). പ്രധാന ഇനം ഗുണങ്ങൾ: flex-grow (ഒരു ഇനം എത്ര വളരുന്നു), flex-shrink (എത്ര ചുരുങ്ങുന്നു), flex-basis (പ്രാരംഭ വലിപ്പം), align-self (ഒരു പ്രത്യേക ഇനത്തിന് കണ്ടെയ്നറിന്റെ align-items ഓവർറൈഡ് ചെയ്യുന്നു). Flexbox നാവിഗേഷൻ ബാറുകൾ, കാർഡ് വരികൾ, കേന്ദ്രീകൃത ലേഔട്ടുകൾ, ഏതൊരു ഒരു-മാനം ക്രമത്തിനും അനുയോജ്യമാണ്.
CSS Flexbox ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം
-
ഡ്രോപ്പ്ഡൌണുകളും ഇൻപുട്ടും ഉപയോഗിച്ച് കണ്ടെയ്നർ ഗുണങ്ങൾ (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) ക്രമീകരിക്കുക.
-
തിരഞ്ഞെടുക്കാൻ പ്രിവ്യൂവിലെ ഏതെങ്കിലും ഇനത്തിൽ ക്ലിക്ക് ചെയ്യുക (ഓറഞ്ച് നിറമാകുന്നു).
-
ഇനം പാനലിൽ തിരഞ്ഞെടുത്ത ഇനത്തിന്റെ flex-grow, flex-shrink, flex-basis, align-self സജ്ജമാക്കുക.
-
കൂടുതൽ ഇനങ്ങൾ ചേർക്കാൻ '+ ഇനം ചേർക്കുക' ക്ലിക്ക് ചെയ്യുക; തിരഞ്ഞെടുത്ത ഇനം ഇല്ലാതാക്കാൻ 'നീക്കം ചെയ്യുക' ക്ലിക്ക് ചെയ്യുക.
-
ജനറേറ്റ് ചെയ്ത കോഡ് കാണാൻ CSS, HTML ടാബുകൾ മാറി ഉപയോഗിക്കുക, പിന്നീട് പകർത്തുക ക്ലിക്ക് ചെയ്യുക.
-
ഡിഫോൾട്ട് 3-ഇനം ലേഔട്ട് ഉപയോഗിച്ച് വീണ്ടും തുടങ്ങാൻ 'എല്ലാം റീസെറ്റ് ചെയ്യുക' ക്ലിക്ക് ചെയ്യുക.