नोट
इस पेज तक पहुँच के लिए प्रमाणन की आवश्यकता होती है. आप साइन इन करने या निर्देशिकाओं को बदलने का प्रयास कर सकते हैं.
इस पेज तक पहुँच के लिए प्रमाणन की आवश्यकता होती है. आप निर्देशिकाओं को बदलने का प्रयास कर सकते हैं.
फ्लेक्स कंटेनर एक लेआउट घटक है जो आपके वेब पेज पर अनुभाग लेआउट डिजाइन करने और बनाने में आपकी मदद करता है। आप बटन, पाठ, चित्र और अन्य कंटेनर जैसे घटकों को समूहीकृत करने के लिए फ्लेक्स कंटेनर का उपयोग कर सकते हैं।
एक फ्लेक्स कंटेनर जोड़ें
अपने वेब पेज पर फ्लेक्स कंटेनर जोड़ने के लिए:
अपने पेज की सामग्री और घटकों को संपादित करने के लिए डिज़ाइन स्टूडियो खोलें.
वह पेज चुनें जिसे आप संपादित करना चाहते हैं.
वह अनुभाग चुनें जहां आप फ्लेक्स कंटेनर घटक जोड़ना चाहते हैं।
किसी भी संपादन योग्य कैनवास क्षेत्र पर माउस घुमाएं, फिर घटक पैनल से फ्लेक्स कंटेनर घटक का चयन करें।
आप अपने फ्लेक्स कंटेनर में अन्य घटकों, जैसे बटन और टेक्स्ट , को जोड़कर घटकों का एक समूह बना सकते हैं।
आप अपने फ्लेक्स कंटेनर को स्टाइल और कॉन्फ़िगर भी कर सकते हैं।
फ्लेक्स कंटेनर संपादित करें
फ्लेक्स कंटेनर जोड़ने के बाद, अपने फ्लेक्स कंटेनर को संपादित करने के लिए गुण बार खोलने हेतु फ्लेक्स कंटेनर नियंत्रण का चयन करें।
| संपत्ति | वर्णन |
|---|---|
| डिज़ाइन करें | अपने फ्लेक्स कंटेनर के स्वरूप को अनुकूलित करने के लिए अपने डिज़ाइन गुण बदलें. |
| पृष्ठभूमि संपादित करें | चयनित स्टाइलिंग टेम्प्लेट के लिए रंग पैलेट के अनुसार पेजभूमि का रंग बदलें। आप एक पेजभूमि छवि भी जोड़ सकते हैं और आकार और स्थिति समायोजित कर सकते हैं। |
| दिशा और संरेखण बदलें | फ्लेक्स कंटेनर में सामग्री को संरेखित करें और उसकी दिशा बदलें। |
| अन्य | अनुभाग की प्रतिलिपि बनाएँ, उसे पृष्ठ पर ऊपर या नीचे ले जाएँ, या अनुभाग को पूरी तरह से हटा दें। |
डिज़ाइन गुण
डिज़ाइन स्टूडियो में निम्नलिखित डिज़ाइन गुण कॉन्फ़िगर करने योग्य हैं:
HTML में फ्लेक्स कंटेनर जोड़ें
आप Visual Studio कोड फॉर द वेब (पूर्वावलोकन) के साथ सीधे अपने वेब पेज के HTML में फ्लेक्स कंटेनर भी जोड़ सकते हैं।
डिज़ाइन स्टूडियो को कस्टम फ्लेक्सबॉक्स डिव्स के कैनवास संपादन को पहचानने और अनुमति देने के लिए, उन पर CSS क्लास "ppFlexContainer" लागू करें।
महत्त्वपूर्ण
ppFlexContainer क्लास के बिना, डिज़ाइन स्टूडियो कस्टम divs को फ्लेक्स कंटेनर घटकों के रूप में नहीं पहचानता है, और आप उन्हें डिज़ाइन स्टूडियो में संपादित नहीं कर सकते हैं।
<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
<div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
<div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
<div class="ppFlexContainer">
<button type="button" class="button1">Button</button>
<button type="button" class="button1">Button</button>
</div>
</div>
</div>
</div>
कस्टम लेआउट बनाएं
आप कस्टम लेआउट बनाने के लिए एकाधिक फ्लेक्स कंटेनरों का उपयोग कर सकते हैं। यहां कुछ उदाहरण दिए गए हैं कि आप क्या कर सकते हैं।