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

फ्लेक्सबॉक्स के साथ एक उत्तरदायी मूल्य निर्धारण ग्रिड बनाना

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

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

लाइव डेमो के लिए और कोड के साथ इंटरैक्ट करने के लिए, इसे देखें:

निष्कर्ष

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