इस गाइड में आपको किसी पेज पर फ़्लेक्सबॉक्स एलिमेंट खोजने का तरीका बताया गया है. साथ ही, एलिमेंट पैनल में फ़्लेक्सबॉक्स लेआउट की जांच करने और उनमें बदलाव करने का तरीका भी बताया गया है.
इस लेख में दिखने वाले स्क्रीनशॉट, इस वेब पेज से लिए गए हैं: फ़्लेक्सबॉक्स की मदद से किसी टेक्स्ट एलिमेंट को सेंटर में दिखाना.
सीएसएस फ़्लेक्सबॉक्स के बारे में जानें
अगर आपके पेज पर मौजूद किसी एचटीएमएल एलिमेंट में display: flex या display: inline-flex लागू होता है, तो आपको एलिमेंट पैनल में, उसके बगल में flex बैज दिख सकता है.
फ़्लेक्सबॉक्स एडिटर की मदद से लेआउट में बदलाव करना
flexbox एडिटर की मदद से, फ़्लेक्सबॉक्स लेआउट में विज़ुअल तौर पर बदलाव किया जा सकता है. उदाहरण के लिए, यहां बताया गया है कि इस डेमो पेज के टेक्स्ट <h1> को इसके कंटेनर <div class="container"> के बीच में कैसे बीच में रखा जा सकता है.
- कंटेनर एलिमेंट की जांच करें.
- स्टाइल पैनल में,
display: flexएलान के बगल में मौजूद फ़्लेक्सबॉक्स एडिटर बटन देखा जा सकता है.
- फ़्लेक्सबॉक्स एडिटर खोलने के लिए, उस पर क्लिक करें. एडिटर, फ़्लेक्सबॉक्स प्रॉपर्टी की एक सूची दिखाता है. हर प्रॉपर्टी की वैल्यू के विकल्प, आइकॉन बटन के तौर पर दिखते हैं.
- टेक्स्ट को स्क्रीन के बीच में लाने के लिए,
justify-content: centerऔरalign-items: centerबटन पर क्लिक करें.
- टेक्स्ट अब बीच में हो. ध्यान दें कि
justify-content: centerऔरalign-items: centerएलान, स्टाइल पैनल में जोड़े जाते हैं.
फ़्लेक्सबॉक्स लेआउट की जांच करना
लेआउट विज़ुअलाइज़ करने के लिए, एलिमेंट पैनल में फ़्लेक्सबॉक्स एलिमेंट पर कर्सर घुमाएं. ओवरले, एलिमेंट के ऊपर दिखता है. इसके कॉन्टेंट और आइटम की जगह दिखाने के लिए, बिंदुओं वाली लाइनें दिखती हैं.
इसके अलावा, बैज पर क्लिक करके फ़्लेक्सबॉक्स ओवरले के डिसप्ले को टॉगल किया जा सकता है.
वैल्यू को बदलकर justify-content: flex-end करें. ओवरले को उसके हिसाब से बदल दिया जाता है.
फ़्लेक्स एडिटर के आइकॉन, कॉन्टेक्स्ट अवेयर होते हैं. यह लेआउट की दिशा के हिसाब से बदल जाएगा. उदाहरण के लिए, जब flex-direction को column में बदला जाता है, तो फ़्लेक्स एडिटर के आइकॉन उसी हिसाब से बदल जाते हैं. ओवरले तुरंत भी अपडेट हो जाता है.
फ़्लेक्सबॉक्स ओवरले के रंग में बदलाव करें
लेआउट पैनल खोलें और नीचे की ओर स्क्रोल करके Flexbox सेक्शन पर जाएं. यहां पेज के सभी फ़्लेक्सबॉक्स एलिमेंट देखे जा सकते हैं.
हर फ़्लेक्सबॉक्स एलिमेंट के ओवरले को टॉगल करके, उसके बगल में मौजूद चेकबॉक्स को चुना जा सकता है. यह वैसा ही होता है जैसा DOM ट्री में badge पर क्लिक किया जाता है.
इसके अलावा, ओवरले के बगल में बने रंग के आइकॉन पर क्लिक करके उसका रंग बदला जा सकता है. उदाहरण के लिए, container ओवरले का रंग बदलकर काला कर दिया गया है.
डीओएम ट्री में किसी फ़्लेक्सबॉक्स एलिमेंट पर जाने के लिए, उसके बगल में मौजूद सिलेक्टर आइकॉन पर क्लिक किया जा सकता है.