हाल में उपयोग किए गए

    कोई टूल खोलें, वह यहाँ दिखाई देगा।

    CSS Flexbox अभ्यास क्षेत्र

    Flexbox लेआउट सीखने और बनाने के लिए इंटरैक्टिव अभ्यास क्षेत्र

    इस टूल को शेयर करें

    समस्या की रिपोर्ट करें

    निजी इनपुट या फ़ाइलें शामिल किए बिना समस्या का वर्णन करें।

    यह टूल कितना उपयोगी था?

    यह टूल कितना उपयोगी था?

    लेआउट सेटिंग

    प्रीसेट लेआउट

    प्रति-आइटम ओवरराइड

    इसकी प्रॉपर्टी संपादित करने के लिए प्रीव्यू या सूची में कोई आइटम चुनें।

    Flexbox त्वरित संदर्भ

    मुख्य अक्ष

    justify-content मुख्य अक्ष (flex-direction से तय) के साथ संरेखण नियंत्रित करता है।

    क्रॉस अक्ष

    align-items क्रॉस अक्ष (flex-direction के लंबवत) के साथ संरेखण नियंत्रित करता है।

    बहु-पंक्ति

    align-content तभी लागू होता है जब flex-wrap को wrap या wrap-reverse पर सेट किया गया हो और कई पंक्तियाँ हों।

    लाइव प्रीव्यू

    जनरेट किया गया CSS

    .container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
}

    सेटिंग बदलें या कोई आइटम चुनें। प्रीव्यू और CSS साथ-साथ अपडेट होते हैं।

    CSS Flexbox अभ्यास क्षेत्र के बारे में

    CSS Flexbox अभ्यास क्षेत्र CSS Flexbox लेआउट सीखने और उन पर प्रयोग करने का एक दृश्य, इंटरैक्टिव टूल है। Flexbox (Flexible Box Layout) सबसे शक्तिशाली और व्यापक रूप से उपयोग होने वाले CSS लेआउट मॉड्यूल में से एक है, जिसे कंटेनर के भीतर आइटम को लचीले, रिस्पॉन्सिव व्यवहार के साथ व्यवस्थित करने के लिए बनाया गया है। यह टूल आपको हर flex कंटेनर और flex आइटम प्रॉपर्टी को रियल टाइम में बदलने देता है और ठीक वैसे ही दिखाता है कि आपका लेआउट कैसे बदलता है।

    डिज़ाइन

    हाल ही में जोड़े गए

    सभी टूल

    गोपनीयता सेटिंग

    एनालिटिक्स, विज्ञापन और वैयक्तिकरण के लिए अपनी प्राथमिकताएँ चुनें। ज़रूरी स्टोरेज आपकी थीम और सहेजे गए टूल जैसी सुविधाओं को चालू रखता है।

    ज़रूरी स्टोरेज हमेशा चालू रहता है।