इस गाइड में, पेज पर फ़्लेक्सबॉक्स एलिमेंट खोजने का तरीका बताया गया है. साथ ही, एलिमेंट पैनल में फ़्लेक्सबॉक्स लेआउट की जांच करने और उनमें बदलाव करने का तरीका भी बताया गया है.
इस लेख में दिख रहे स्क्रीनशॉट, इस वेब पेज से लिए गए हैं: फ़्लेक्सबॉक्स की मदद से टेक्स्ट एलिमेंट को सेंटर में दिखाना.
सीएसएस फ़्लेक्सबॉक्स के बारे में जानें
जब आपके पेज के किसी एचटीएमएल एलिमेंट पर display: flex या display: inline-flex लागू होता है, तो आपको एलिमेंट पैनल में, उसके बगल में flex बैज दिख सकता है.
फ़्लेक्सबॉक्स एडिटर की मदद से लेआउट में बदलाव करना
फ़्लेक्सबॉक्स एडिटर की मदद से, फ़्लेक्सबॉक्स लेआउट में विज़ुअल तौर पर बदलाव किया जा सकता है. उदाहरण के लिए, यहां इस डेमो पेज के टेक्स्ट <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 ओवरले का रंग बदलकर काला कर दिया गया है.
डीओएम ट्री में फ़्लेक्सबॉक्स एलिमेंट पर जाने के लिए, उसके बगल में मौजूद सिलेक्टर आइकॉन पर क्लिक करें.