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

ഫ്ലെക്സ് ദിശയിൽ പരീക്ഷിക്കുക, പൊതിയുക, ന്യായീകരിക്കുക, വിന്യസിക്കുക. ഇനം ലേഔട്ടുകൾ തത്സമയം അപ്‌ഡേറ്റ് ചെയ്യുന്നത് കാണുക, തുടർന്ന് കണ്ടെയ്‌നർ CSS പകർത്തുക.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

ഫ്ലെക്സ് ദിശയിൽ പരീക്ഷണം നടത്തുക, പൊതിയുക, ന്യായീകരിക്കുക, വിന്യസിക്കുക - ലേഔട്ടുകൾ അപ്ഡേറ്റ് തത്സമയം കാണുക.
നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു
സൗജന്യമായി ഉപയോഗിക്കാം

എങ്ങനെ ഉപയോഗിക്കാം

ഫ്ലെക്സ്-ദിശ സജ്ജീകരിച്ച് പൊതിയുക.
ജസ്റ്റിഫൈ-ഉള്ളടക്കം ക്രമീകരിക്കുക, ഇനങ്ങൾ വിന്യസിക്കുക.
Flexbox CSS പകർത്തുക.

How this tool works

ഫ്ലെക്സ്-ദിശ സജ്ജീകരിച്ച് പൊതിയുക.
ജസ്റ്റിഫൈ-ഉള്ളടക്കം ക്രമീകരിക്കുക, ഇനങ്ങൾ വിന്യസിക്കുക.
Flexbox CSS പകർത്തുക.

Recommended settings

ആദ്യം ഡിഫോൾട്ട് ഓപ്ഷനുകൾ ഉപയോഗിക്കുക, തുടർന്ന് ആവശ്യമെങ്കിൽ ക്രമീകരിക്കുക

Supported formats

Text / on-page input

File size and limits

വളരെ സങ്കീർണ്ണമായ മൾട്ടി-ലെയർ പ്രിവ്യൂകൾ പഴയ ഫോണുകളിൽ മന്ദഗതിയിലായേക്കാം.

Privacy

നിറവും CSS ജനറേറ്ററുകളും പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു. പ്രിവ്യൂകളും പരിവർത്തനങ്ങളും ഒരിക്കലും നിങ്ങളുടെ ശൈലികൾ അപ്‌ലോഡ് ചെയ്യുന്നില്ല.

Common use cases

നിങ്ങൾക്ക് ആവശ്യമുള്ളപ്പോഴെല്ലാം ഫ്ലെക്സ്ബോക്സ് ജനറേറ്റർ ഉപയോഗിക്കുക: ഫ്ലെക്സ് ദിശ ഉപയോഗിച്ച് പരീക്ഷിക്കുക, പൊതിയുക, ന്യായീകരിക്കുക, വിന്യസിക്കുക - ലേഔട്ടുകൾ അപ്ഡേറ്റ് തത്സമയം കാണുക.

Troubleshooting

ഒട്ടിച്ചതിന് ശേഷം പ്രിവ്യൂ വ്യത്യസ്തമായി കാണപ്പെടുന്നു

നിങ്ങളുടെ പേജിൽ മത്സരിക്കുന്ന CSS പരിശോധിക്കുക (റീസെറ്റുകൾ, പാരമ്പര്യ നിറങ്ങൾ). ജനറേറ്റ് ചെയ്ത നിയമം ആദ്യം ഒരു ഒറ്റപ്പെട്ട സ്റ്റൈൽഷീറ്റിലേക്ക് പകർത്തുക.

പതിവ് ചോദ്യങ്ങൾ

ഇത് എൻ്റെ CSS അപ്‌ലോഡ് ചെയ്യുന്നുണ്ടോ?

നമ്പർ. ജനറേറ്ററുകളും കൺവെർട്ടറുകളും തത്സമയ പ്രിവ്യൂ ഉപയോഗിച്ച് നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു.

എനിക്ക് ഒരു അക്കൗണ്ട് ആവശ്യമുണ്ടോ?

ഇല്ല. ടൂൾ തുറക്കുക, നിയന്ത്രണങ്ങൾ മാറ്റുക, CSS പകർത്തുക.