LibraTool logoLibraTool

സൗജന്യ CSS ഫ്ലെക്സ്ബോക്സ് ജനറേറ്റർ

ലൈവ് ഐറ്റങ്ങളിൽ flex direction, wrap, justify, align എന്നിവ പരീക്ഷിക്കുക — CSS കോപ്പി ചെയ്യുക.

ലോഡ് ചെയ്തുകഴിഞ്ഞാൽ ഓഫ്‌ലൈനിൽ പ്രവർത്തിക്കുന്നു
പ്രീസെറ്റുകൾ

ടിപ്പ്: flex-grow: 1 ടോഗിൾ ചെയ്യാൻ പ്രിവ്യൂവിലെ ഒരു ഐറ്റത്തിൽ ക്ലിക്ക് ചെയ്യുക.

ലൈവ് പ്രിവ്യൂ
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 എല്ലാം നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു — ഒന്നും അപ്‌ലോഡ് ചെയ്യുന്നില്ല.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഒരു ഇന്ററാക്ടീവ് flexbox പ്ലേഗ്രൗണ്ട്: flex-direction, wrap, justify-content, align-items എന്നിവ മാറ്റുകയും 10 തത്സമയ ഇനങ്ങൾ വരെ ഉടനടി പുനഃക്രമീകരിക്കുന്നത് കാണുകയും ചെയ്യുക. ഏതെങ്കിലും ഇനത്തിന് flex-grow: 1 നൽകാൻ അതിൽ ക്ലിക്ക് ചെയ്യുക, അത് സ്ഥലം എങ്ങനെ ക്ലെയിം ചെയ്യുന്നു എന്ന് കാണുക. CSS തത്സമയം അപ്ഡേറ്റ് ആകുന്നു, നിങ്ങളുടെ പ്രോജക്ടിലേക്ക് കോപ്പി ചെയ്യാൻ തയ്യാർ.

  1. 1
    കണ്ടെയ്നർ സെറ്റ് ചെയ്യുക
    Direction, wrap, justify-content, align-items, gap.
  2. 2
    ഇനങ്ങൾ ചേർക്കുക
    ഒന്ന് മുതൽ പത്ത് വരെ അക്കമിട്ട flex ഇനങ്ങൾ.
  3. 3
    പരീക്ഷിക്കുക
    flex-grow ടോഗിൾ ചെയ്ത് ഇഫക്ട് കാണാൻ ഒരു ഇനത്തിൽ ക്ലിക്ക് ചെയ്യുക.
  4. 4
    CSS കോപ്പി ചെയ്യുക
    കണ്ടെയ്നറും (ഇനം) റൂളുകളും, പേസ്റ്റ് ചെയ്യാൻ തയ്യാർ.

എല്ലാം നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു — ഒന്നും അപ്‌ലോഡ് ചെയ്യപ്പെടില്ല.

അനുബന്ധ ടൂളുകൾ

🟦

CSS ഗ്രിഡ് ജനറേറ്റർ

CSS ഗ്രിഡ് ദൃശ്യപരമായി ഡിസൈൻ ചെയ്യുക — ട്രാക്കുകൾ, യൂണിറ്റുകൾ, ഗ്യാപ്പുകൾ — തുടർന്ന് ജനറേറ്റ് ചെയ്ത CSS-ഉം HTML-ഉം കോപ്പി ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ
🎨

CSS ബോക്സ് ഷാഡോ ജനറേറ്റർ

ലൈവ് പ്രിവ്യൂ, മൾട്ടി-ലെയർ സ്റ്റാക്കിംഗ്, കളർ പിക്കർ, ഇൻസെറ്റ് ടോഗിൾ, ഒറ്റ-ക്ലിക്ക് കോപ്പി എന്നിവയോടെ CSS box-shadow-ന് വിഷ്വൽ ബിൽഡർ. Material, ന്യൂമോർഫിസം, ഗ്ലോ പ്രീസെറ്റുകൾ ഉൾപ്പെടുന്നു.

പരീക്ഷിച്ചു നോക്കൂ
◖

CSS ബോർഡർ റേഡിയസ് ജനറേറ്റർ

ഓരോ കോണിലും സ്വതന്ത്ര നിയന്ത്രണത്തോടെ വൃത്താകൃതിയിലുള്ള കോണുകൾ വിഷ്വലായി ഡിസൈൻ ചെയ്യുക. ഓർഗാനിക് ബ്ലോബ് ആകൃതികൾക്കായി എലിപ്റ്റിക്കൽ X/Y സിന്റാക്സ് പിന്തുണയ്ക്കുന്നു.

പരീക്ഷിച്ചു നോക്കൂ

പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ