मुख्य सामग्रीमा जानुहोस्
LibraTool logoLibraTool

निःशुल्क CSS Flexbox जनरेटर

Flex दिशा, र्याप, जस्टिफाई र लाइभ वस्तुहरूमा पङ्क्तिबद्ध गर्नुहोस् — र 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
    कन्टेनर सेट गर्नुहोस्
    दिशा, wrap, justify-content, align-items, gap।
  2. 2
    आइटमहरू थप्नुहोस्
    एकदेखि दश नम्बर गरिएका flex आइटमहरू।
  3. 3
    प्रयोग गरी हेर्नुहोस्
    flex-grow टगल गर्न र प्रभाव हेर्न एउटा आइटम क्लिक गर्नुहोस्।
  4. 4
    CSS प्रतिलिपि गर्नुहोस्
    कन्टेनर (र आइटम) नियमहरू, पेस्ट गर्न तयार।

सबै कुरा तपाईंको ब्राउजरमा चल्छ — केही पनि अपलोड हुँदैन।

सम्बन्धित उपकरणहरू

🟦

CSS ग्रिड जनरेटर

CSS ग्रिड दृश्यमान रूपमा डिजाइन गर्नुहोस् — ट्र्याकहरू, एकाइहरू र अंतरहरू — र उत्पन्न CSS र HTML प्रतिलिपि गर्नुहोस्।

प्रयास गर्नुहोस्
🌈

CSS ग्रेडियन्ट जेनेरेटर

लाइभ प्रिभ्यूका साथ linear, radial, र conic CSS gradient सिर्जना गर्नुहोस्। एक क्लिकमा CSS कपी गर्नुहोस्।

प्रयास गर्नुहोस्
🎨

CSS बक्स शेडो जेनेरेटर

लाइभ प्रिभ्यू, बहु-तह स्ट्याकिङ, रङ चयनकर्ता, inset टगल, र एक-क्लिक कपीसहित CSS box-shadow का लागि भिजुअल बिल्डर। Material, neumorphism, र glow प्रिसेटहरू समावेश छन्।

प्रयास गर्नुहोस्

बारम्बार सोधिने प्रश्नहरू