फ्लेक्सबॉक्स पैटर्न अंतिम सीएसएस फ्लेक्सबॉक्स कोड लाइब्रेरी

नवीनतम सीएसएस फ्लेक्सबॉक्स संपत्ति ने मौलिक रूप से डेवलपर्स के इंटरफेस बनाने के तरीके को बदल दिया है। लेआउट को पूरी तरह से संरेखित करने के लिए कोई और फ़्लोट और सीएसएस हैक नहीं। बहु-स्तंभित लेआउट को संभालने के लिए कस्टम उत्तरदायी तकनीकों के बारे में कोई अधिक चिंता नहीं.

लेकिन भले ही फ्लेक्सबॉक्स कई समस्याओं को हल करता है लेकिन यह सीखना भी जटिल है। आरंभ करने में आपकी सहायता के लिए फ्लेक्सबॉक्स पैटर्न नामक एक नई ऑनलाइन लाइब्रेरी है जो कई अलग-अलग फ्लेक्सबॉक्स तत्वों को एक केंद्रीय स्थान में सूचीबद्ध करती है.

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

प्रत्येक पैटर्न का अपना पृष्ठ एक संक्षिप्त विवरण और कोड नमूने के साथ होता है। आप काफी शाब्दिक रूप से कर सकते हैं अपने मौजूदा वेब प्रोजेक्ट में कोड कॉपी और पेस्ट करें, हालाँकि यह अनुशंसा की जाती है कि आप पहले यह जानें कि कोड क्या करता है और आप इसका उपयोग क्यों कर रहे हैं.

उदाहरण के लिए साइट के हेडर बार डेमो को फ्लेक्सबॉक्स का उपयोग करके सभी तत्वों को एक शीर्ष नौबार साइड-बाय-साइड में संरेखित करें.

आमतौर पर यह सब कुछ ठीक से संरेखित करने के लिए तैरता है और एक स्पष्ट वर्ग की आवश्यकता होगी.

Flexbox के साथ आप सब कुछ एक कंटेनर में रख सकते हैं प्रदर्शन: फ्लेक्स संपत्ति। इस तरह आप कर सकते हैं परिभाषित करें कि तत्वों को कैसे बातचीत करनी चाहिए एक दूसरे के साथ और फ्लेक्सबॉक्स कैसे छोटी स्क्रीन पर काम करना चाहिए.

पैटर्न लगातार अपडेट किए जा रहे हैं और वर्तमान लाइब्रेरी टैब, साइडबार और वर्टिकल / हॉरिज़ॉन्टल सेंटरिंग जैसे सबसे आम तत्वों पर केंद्रित है.

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