Skip to main content

सीएसएस फ्लेक्सबॉक्स प्लेग्राउंड इंटरएक्टिव नियंत्रणों के साथ विज़ुअल सीएसएस फ्लेक्सबॉक्स एक्सप्लोरर, सभी फ्लेक्स कंटेनर गुणों के लिए。

सीएसएस फ्लेक्सबॉक्स प्लेग्राउंड illustration
🎨

सीएसएस फ्लेक्सबॉक्स प्लेग्राउंड

इंटरएक्टिव नियंत्रणों के साथ विज़ुअल सीएसएस फ्लेक्सबॉक्स एक्सप्लोरर, सभी फ्लेक्स कंटेनर गुणों के लिए。

1

फ्लेक्स कंटेनर गुणों को सेट करें

फ्लेक्स-दिशा, जस्टिफाई-सामग्री, अलाइन-आइटम, फ्लेक्स-लपेट और अंतराल चुनें।

2

आइटम को समायोजित करें

फ्लेक्स आइटमों की संख्या बदलकर देखें कि लेआउट कैसे अनुकूल होता है।

3

सीएसएस को कॉपी करें

लेआउट का पूर्वावलोकन करें और फ्लेक्सबॉक्स कंटेनर सीएसएस कोड को कॉपी करें।

Loading tool...

What Is सीएसएस फ्लेक्सबॉक्स प्लेग्राउंड?

सीएसएस फ्लेक्सबॉक्स प्लेग्राउंड सीएसएस फ्लेक्सबॉक्स लेआउट के साथ सीखने और प्रयोग करने के लिए एक इंटरैक्टिव टूल है। फ्लेक्सबॉक्स आइटमों को पंक्तियों या कॉलम में व्यवस्थित करने के लिए एक एक-आयामी लेआउट विधि है, जिसमें शक्तिशाली संरेखण और वितरण नियंत्रण होते हैं। यह प्लेग्राउंड आपको दृश्य रूप से सभी फ्लेक्स कंटेनर गुणों को बदलने की अनुमति देता है: फ्लेक्स-दिशा मुख्य अक्ष को नियंत्रित करती है, जस्टिफाई-कंटेंट मुख्य अक्ष पर स्थान वितरित करती है, अलाइन-आइटम्स क्रॉस अक्ष पर आइटम्स को संरेखित करते हैं, फ्लेक्स-लपेट लपेटने को नियंत्रित करता है, और गैप आइटम्स के बीच अंतराल निर्धारित करता है। पूर्वावलोकन विभिन्न ऊंचाइयों के रंगीन फ्लेक्स आइटम्स को स्पष्ट रूप से दिखाता है कि प्रत्येक गुण लेआउट को कैसे प्रभावित करता है। आप विभिन्न सामग्री मात्राओं पर लेआउट की प्रतिक्रिया देखने के लिए आइटम्स की संख्या समायोजित कर सकते हैं।

Why Use सीएसएस फ्लेक्सबॉक्स प्लेग्राउंड?

  • सभी फ्लेक्स कंटेनर गुणों के लिए इंटरएक्टिव नियंत्रण
  • रंगीन आइटमों के विभिन्न ऊंचाइयों के साथ दृश्य पूर्वावलोकन
  • लेआउट लचीलेपन का परीक्षण करने के लिए समायोज्य आइटम गणना
  • उत्पादन उपयोग के लिए तैयार स्वच्छ सीएसएस आउटपुट

Common Use Cases

नेविगेशन बार

केंद्रित या अंतराल वाले आइटमों के साथ लचीले नेविगेशन लेआउट बनाएं।

कार्ड ग्रिड

सही ढंग से लपेटने और संरेखित करने वाले प्रतिक्रियात्मक कार्ड लेआउट बनाएं।

सामग्री को केंद्र में रखना

आइटमों को आसानी से क्षैतिज और ऊर्ध्वाधर दोनों तरह से केंद्रित करें।

फ्लेक्सबॉक्स सीखना

प्रयोग के माध्यम से यह समझें कि प्रत्येक फ्लेक्सबॉक्स गुण लेआउट को कैसे प्रभावित करता है।

Technical Guide

सीएसएस फ्लेक्सबॉक्स एक कंटेनर तत्व पर डिस्प्ले: फ्लेक्स के साथ सक्रिय किया जाता है। फ्लेक्स-दिशा गुण मुख्य अक्ष निर्धारित करता है: पंक्ति (डिफ़ॉल्ट, क्षैतिज), कॉलम (उल्लंब), और उनके उलट वेरिएंट। जस्टिफाई-कंटेंट मुख्य अक्ष पर स्थान वितरित करती है: फ्लेक्स-शुरू, फ्लेक्स-अंत, केंद्र, स्पेस-बीच (आइटम्स के बीच समान अंतराल), स्पेस-चारों ओर (आइटम्स के चारों ओर समान अंतराल), और स्पेस-समान रूप से। अलाइन-आइटम्स क्रॉस अक्ष पर संरेखित करते हैं: खींचना (डिफ़ॉल्ट, ऊंचाई भरता है), फ्लेक्स-शुरू, फ्लेक्स-अंत, केंद्र, और बेसलाइन। फ्लेक्स-लपेट: लपेट आइटम्स को अगली पंक्ति में बहने देता है जब वे ओवरफ़्लो होते हैं। गैप गुण आइटम्स के बीच निरंतर अंतराल जोड़ता है बिना मार्जिन की आवश्यकता के। फ्लेक्स आइटम्स अपने आकार को नियंत्रित करने के लिए फ्लेक्स-विकास, फ्लेक्स-संकुचन, और फ्लेक्स-बेसिस का उपयोग कर सकते हैं। ऑर्डर गुण आइटम्स को बिना एचटीएमएल बदले पुनर्व्यवस्थित कर सकता है। फ्लेक्सबॉक्स एक-आयामी लेआउट (एकल पंक्ति या कॉलम) के लिए आदर्श है, जबकि सीएसएस ग्रिड दो-आयामी लेआउट के लिए बेहतर है।

Tips & Best Practices

  • 1
    सही केंद्रीकरण के लिए जस्टिफाई-सामग्री: केंद्र और अलाइन-आइटम: केंद्र का उपयोग करें
  • 2
    प्रतिक्रियात्मक ग्रिड के लिए फ्लेक्स-लपेट: लपेटने को आइटमों पर एक न्यूनतम चौड़ाई के साथ जोड़ें
  • 3
    आइटमों के बीच समान अंतराल के लिए मार्जिन के बजाय अंतराल का उपयोग करें
  • 4
    उन आइटमों पर फ्लेक्स-ह्रास: 0 सेट करें जो अपने आकार से कम नहीं होने चाहिए

Related Tools

Frequently Asked Questions

Q फ्लेक्सबॉक्स बनाम ग्रिड कब उपयोग करना चाहिए?
एक-आयामी लेआउट (पंक्ति या कॉलम) के लिए फ्लेक्सबॉक्स का उपयोग करें। दो-आयामी लेआउट (पंक्तियाँ और कॉलम एक साथ) के लिए ग्रिड का उपयोग करें।
Q फ्लेक्सबॉक्स के साथ एक तत्व को कैसे केंद्रित करें?
माता-पिता कंटेनर पर प्रदर्शन: फ्लेक्स; जस्टिफाई-सामग्री: केंद्र; अलाइन-आइटम: केंद्र सेट करें।
Q फ्लेक्स: 1 का अर्थ क्या है?
फ्लेक्स: 1 फ्लेक्स-विकास: 1; फ्लेक्स-ह्रास: 1; फ्लेक्स-आधार: 0 के लिए संक्षिप्त नाम है, जो आइटम को उपलब्ध स्थान भरने में मदद करता है।
Q क्या मैं फ्लेक्स आइटमों का क्रम बदल सकता हूं?
हां, फ्लेक्स आइटमों पर ऑर्डर गुण का उपयोग करें। कम मान पहले दिखाई देते हैं। डिफ़ॉल्ट क्रम 0 है।
Q क्या फ्लेक्सबॉक्स सभी ब्राउज़रों में काम करता है?
हां, फ्लेक्सबॉक्स सभी आधुनिक ब्राउज़रों में समर्थित है, जिसमें आईई11 (कुछ सीमाओं के साथ) भी शामिल है।

About This Tool

सीएसएस फ्लेक्सबॉक्स प्लेग्राउंड is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.