इस टूल के बारे में
Flexbox आधुनिक CSS लेआउट की रीढ़ है, पर इसकी प्रॉपर्टीज़ तब तक याद रखना कठिन है जब तक आप उन्हें क्रिया में न देख लें। यह जनरेटर flex-direction, justify-content, align-items, flex-wrap और gap को सरल कंट्रोल में बदल देता है, साथ में असली आइटम की एक पंक्ति जो आपके कुछ भी बदलते ही तुरंत पुनर्व्यवस्थित हो जाती है।
यह समझने का सबसे तेज़ तरीका है कि प्रॉपर्टीज़ कैसे परस्पर क्रिया करती हैं — और जब लेआउट सही दिखे, कंटेनर CSS कॉपी करें। सब कुछ आपके ब्राउज़र में चलता है।
अक्सर पूछे जाने वाले प्रश्न
क्या यह कंटेनर के लिए CSS जनरेट करता है या अलग-अलग आइटम्स के लिए?
यह पैरेंट कंटेनर के flex प्रॉपर्टीज़ (flex-direction, justify-content, align-items, flex-wrap, gap) जनरेट करता है — flex-grow या order जैसी हर-आइटम प्रॉपर्टीज़ इसमें कवर नहीं होतीं।
justify-content और align-items में क्या अंतर है?
justify-content मेन एक्सिस (row लेआउट में हॉरिज़ॉन्टल) पर स्पेसिंग को कंट्रोल करता है, जबकि align-items क्रॉस एक्सिस (row लेआउट में वर्टिकल) पर एलाइनमेंट को कंट्रोल करता है।
क्या आधुनिक प्रोजेक्ट्स में flexbox के लिए वेंडर प्रीफ़िक्स ज़रूरी हैं?
नहीं, सभी मौजूदा ब्राउज़र बिना प्रीफ़िक्स वाले flexbox प्रॉपर्टीज़ को सपोर्ट करते हैं; पुराना -webkit-box / -ms-flexbox सिंटैक्स सिर्फ दस साल से पुराने ब्राउज़र के लिए ज़रूरी है।
क्या मेरा लेआउट डेटा कहीं अपलोड होता है?
नहीं। प्रीव्यू और जनरेट किया गया CSS पूरी तरह आपके ब्राउज़र में ही चलते हैं — कुछ भी सर्वर पर नहीं भेजा जाता।
कुछ पुराने ब्राउज़र में gap वैल्यू क्यों लागू नहीं होती?
flex कंटेनर में gap प्रॉपर्टी 2021 के बाद रिलीज़ हुए सभी ब्राउज़र में सपोर्टेड है; पुराने ब्राउज़र के लिए इसके बजाय आइटम्स पर margin का इस्तेमाल करें।