ठीक है, तत्व के लिए डिफ़ॉल्ट की परवाह किए बिना, आप इस संपत्ति को सेटिंग द्वारा बदल सकते हैं:

display: block
display: inline-block

अब अपने कोड पेन में, सभी बॉक्स को एक साथ दिखाने के लिए .बॉक्स नियम सेट को बदलें।

फ्लेक्सबॉक्स और ग्रिड

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

प्रदर्शन: फ्लेक्स

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

इसे क्रियान्वित होते देखने के लिए, कोडपेन में .फ़्रेम नियम-सेट पर एक नज़र डालें।

कोड की निम्नलिखित पंक्ति को अनटिप्पणी करें:

display: flex;

यह चार इनलाइन-ब्लॉक के समान दिखता है, है ना? डिफ़ॉल्ट रूप से, एक फ्लेक्स कंटेनर अपने आइटम को फ्लेक्सबॉक्स की शुरुआत या बाईं ओर उचित ठहराता है, लेकिन, इसे बदला भी जा सकता है!

फ्लेक्सबॉक्स की घोषणा के नीचे, इसे जोड़ें:

justify-content: center;

और अब हमें सभी बॉक्स स्क्रीन के मध्य में दिखाई देंगे!

लेकिन, क्या होगा अगर हम नहीं चाहते कि वे इस तरह शीर्ष पर अटके रहें? आइए यह भी जोड़ें:

align-items: center;

महान!

प्रदर्शन: ग्रिड

नोट: कोडपेन में आगे बढ़ने से पहले, सुनिश्चित करें कि आप टिप्पणी करते हैं या डिस्प्ले: फ्लेक्स और आपके द्वारा जोड़े गए जस्टिफाई-कंटेंट या एलाइन-आइटम गुणों वाली पंक्तियों को हटा देते हैं।

फ्लेक्सबॉक्स के अलावा, हमारे पास अपने पूरे तत्व को ग्रिड में बदलने का विकल्प भी है, जहां हम आइटम रख सकते हैं!

मैं यहां इस कोड के विवरण के बारे में ज्यादा नहीं बताऊंगा, लेकिन जानता हूं कि तत्व को ग्रिड घोषित करके, ग्रिड टेम्पलेट प्रदान करके और फिर ग्रिड के भीतर आइटम रखकर यह संभव है!

.फ़्रेम नियमसेट में निम्नलिखित पंक्तियों को अनटिप्पणी करें!

display: grid;  
  grid-template: 1fr 1fr / 1fr 1fr;
  align-items: center;
  justify-items: center;

अब, आपको प्रत्येक बॉक्स को फ़्रेम के चतुर्थांश के केंद्र में स्थित देखना चाहिए!

अपने नए पाए गए कौशल का उपयोग करें!

पिछले लेख की तरह, यहां चुनौतियों की एक श्रृंखला है। आप प्रयास करने से पहले ग्रिड लेआउट बनाने वाले कोड की पंक्तियों को हटाना या पुनः टिप्पणी करना चाहेंगे!

चुनौती #1: प्रत्येक ब्लॉक को किनारों को छुए बिना और केंद्र में लंबवत रूप से क्षैतिज तल पर समान रूप से प्रदर्शित करने के लिए सही औचित्य-सामग्री संपत्ति के लिए एमडीएन खोजें, जैसा कि नीचे चित्र में दिखाया गया है।

चुनौती #2: अभी भी एक फ्लेक्स कंटेनर में, देखें कि क्या आप सभी बक्सों को एक साथ समूहित कर सकते हैं और उन्हें निचले दाएं कोने में रख सकते हैं! (इसके लिए आपको किन संपत्तियों को समायोजित करना होगा?)

चुनौती #3: क्या आप एक फ्लेक्स प्रॉपर्टी ढूंढ सकते हैं जो तत्वों के प्रदर्शन क्रम को उलट देगी?

इन चुनौतियों को पूरा करने के लिए बधाई! अधिक HTML और CSS के लिए अगले सप्ताह मिलते हैं!