Display Property: Block, Inline, Flex, Grid In Hindi
एचटीएमएल वेब पेज सीएसएस में ब्लॉक डिस्प्ले प्रॉपर्टी को कई तरीके से डिफाइन कर सकते है, जहा वेब डेवलपर इन ब्लॉक प्रॉपर्टी को एचटीएमएल वेब पेज लेआउट स्ट्रक्चर डिज़ाइन करने में अधिक उपयोग करते है. जहा सीएसएस के माध्यम से आप ब्लॉक एलिमेंट, इनलाइन, फ्लेक्स, और ग्रिड ब्लॉक प्रॉपर्टीज को क्रिएट कर आपस में इन्हे इंटरैक्ट करवा सकते है।
So, let’s understand block, inline, flex, and grid display properties better using CSS in HTML web page.
Block display property in CSS.
एचटीएमएल वेब पेज में सीएसएस का उपयोग कर ब्लॉक डिस्प्ले सीएसएस प्रॉपर्टी वेब पेज में एक नई लाइन से शुरू होते हुए, वेब पेज में उपलब्ध ब्लॉकबॉक्स मॉडल की पूरी विड्थ को कवर करता है। जहा आप वेब पेज में क्रिएट एक ब्लॉक एलिमेंट की वेब पेज हाइट और विड्थ कंटेंट वैल्यू कंटेंट इनफार्मेशन को डिफाइन कर सकते है। यहाँ आप एचटीएमएल वेब पेज में कुछ पॉपुलर वेब पेज ब्लॉक एलिमेंट टैग में, <div> टैग, <h1> टैग, <p> टैग, <section> टैग, और <article> टैग, आदि टैग का इस्तेमाल कर सकते है।
Display block property in HTML web page Example.
.blockbox-model {
display: block;
width: 120%; /* display block Full width */
height: 70px; /* display 70px height */
background-color: yellow;
}
inline display property in CSS.
एचटीएमएल वेब पेज सीएसएस में इनलाइन डिस्प्ले प्रॉपर्टी वेब पेज में केवल उतनी ही विड्थ को कवर करता है, जितनी वेब पेज में इनलाइन बॉक्स कंटेंट विड्थ के लिए जरूरी हो। जहा ये इनलाइन डिस्प्ले प्रॉपर्टी एक नई लाइन से शुरूनहीं होती है, इनलाइन प्रॉपर्टी में वेब पेज एलिमेंट एक सीक्वेंस में डिस्प्ले होते है। जहा आप अपनी जरूरत के अनुसार इनलाइन डिस्प्ले ऑब्जेक्ट की हाइट विड्थ और इनके डिफ़ॉल्ट वैल्यू ऐट्रिब्यूट्स को कस्टम सेट कर सकते है। इनलाइन डिस्प्ले ब्लॉक प्रॉपर्टी में कुछ सामान्य इनलाइन टैग एलिमेंट को जैसे <span> टैग, <a> टैग, <strong> टैग, <em> टैग , आदि एलिमेंट का उपयोग कर सकते है।
Display inline property in HTML web page Example.
.inlinebox-model {
display: inline;
background-color: aqua;
}
Flex display property in CSS.
एचटीएमएल वेब पेज सीएसएस में फ्लेक्स डिस्प्ले प्रॉपर्टी वेब डेवलपर को एक फ्लेक्स बॉक्स आइटम कंटेनर क्रिएट कर फ्लेक्सिबल बॉक्स लेआउट प्रदान करता है। जहा वेब डेवलपर डिजिटल कंटेंट आइटम को फ्लेक्स कंटेनर के अंदर अलाइन और स्टोर कर सकते है। फ्लेक्सबॉक्स को आपको एक यूज़फुल एलाइनमेंट और ऑब्जेक्ट स्टोर फीचर्स प्रदान करता है। वेब पेज में फ्लेक्सबॉक्स को आइटम कंटेनर के रूप रेस्पॉन्सिव वेब पेज स्ट्रक्चर या लेआउट डिज़ाइन में उपयोग करते है, जहा फ्लेक्स में रौस और कॉलम में फ्लेक्स आइटम को अलाइन करते है।
Display flexbox property in HTML web page Example.
.flexbox-model {
display: flex;
justify-content: space-between; /* display space among flex item */
padding: 20px;
background-color: green;
}
.flexbox-modelitem {
background-color: orange;
width: 40%; /* every flexboxmodel item contain 40% in flex container */
padding: 20px;
}
Grid display property in CSS.
एचटीएमएल वेब पेज में सीएसएस के माध्यम से आप एक 2-डायमेंशनल ग्रिड स्ट्रक्चर लेआउट को क्रिएट कर सकते है, जिसके माध्यम से आप ग्रिड बॉक्स में रौस और कॉलम में डिजिटल कंटेंट को स्टोर कर सकते हैं। ग्रिड बॉक्स मॉडल वेब डेवलपर को फ्लेक्सबॉक्स की तुलना में ज्यादा काम्प्लेक्स और पॉवरफुल बॉक्स मॉडल स्ट्रक्चर प्रोवाइड करता है। जहा आप ग्रिड बॉक्स मॉडल में रौस और कॉलम में को डिफाइन कर सकते है, जिससे आप मल्टीप्ल डिवाइस स्क्रीन साइज के अनुसार वेब पेज लेआउट को कस्टमाइज कर सकते हैं। ग्रिडबॉक्स मॉडल को आप वेब पेज में काम्प्लेक्स सेक्शंस ब्लॉक वेब स्ट्रक्चर लेआउट डेवलपमेंट के लिए बेहतर विकल्प है ।
Display gridbox property in HTML web page Example.
.gridbox-model {
display: grid;
grid-template-columns: repeat(4, 1fr); /* it display 4 equal columns */
gap: 20px; /* it display Space between grid item elements */
}
.gridbox-itemmodel {
background-color:teal;
padding: 30px;
}
Block box, inline box, flex box, grid box model display properties example in HTML web page CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Block, Inline, Flex And Grid Box Display Properties Code</title>
<style>
body {
font-size:1.1em;
color: white;
font-family: times new roman;
}
.blockbox-model {
display: block;
width: 120%; /* Display 120 block box width */
height: 40px;
background-color: #2ecc71;
margin-bottom:20px;
margin-top: 10px;
}
.inlinebox-model {
display: inline;
background-color: #f1c40f;
padding: 13px;
margin-top: 8px;
}
.flexbox-model {
display: flex;
justify-content: space-between; /* it add space among flex element */
padding: 20px;
background-color: #5d4037;
margin-bottom: 8px;
}
.flexbox-modelitem {
background-color: #e64a19;
width: 30%; /* Each item takes 30% of the container */
padding: 10px;
}
.gridbox-model {
display: grid;
grid-template-columns: repeat(3, 2fr); /* display three equal column in grid */
gap: 10px; /* it display space among grid element */
}
.gridbox-element {
font-family:monotype corsiva;
background-color: #d81b60;
padding: 10px;
}
</style>
</head>
<body>
<div class=”blockbox-model”>You See Block Box Model Preview</div>
<span class=”inlinebox-model”>Windows</span>
<span class=”inlinebox-model”>Linux</span>
<span class=”inlinebox-model”>Apple Mac Os</span>
<br>
<br>
<div class=”flexbox-model”>
<div class=”flexbox-modelitem”>Java</div>
<div class=”flexbox-modelitem”>Python</div>
<div class=”flexbox-modelitem”>Css</div>
</div>
<div class=”gridbox-model”>
<div class=”gridbox-element”>Bootstrap</div>
<div class=”gridbox-element”>JavaScript</div>
<div class=”gridbox-element”>Kotlin</div>
<div class=”gridbox-element”>Html</div>
<div class=”gridbox-element”>Html 5</div>
<div class=”gridbox-element”>Java</div>
</div>
</body>
</html>
Display block property explanation in HTML web page CSS.
- Block model – ब्लॉक बॉक्स मॉडल वेब पेज में पूरी विड्थ को कवर करता है, जहा ब्लॉक बॉक्स मॉडल हमेशा एक नई रौ से स्टार्ट होता है। इसे आप वेब पेज लेआउट सेक्शन स्ट्रक्चर बनाने में इसे उपयोग कर सकते है।
- Inline box model – इनलाइन बॉक्स मॉडल मौजूदा वेब पेज में केवल जरूरी बॉक्स विड्थ को ही कवर करता है, यह एक नई लाइन से स्टार्ट नहीं होता है।
- Flex box model – यह फ्लेक्स बॉक्स मॉडल आइटम क्रिएट के लिए फ्लेक्सिबल स्ट्रक्चर लेआउट के लिए अच्छा विकल्प है, जहा फ्लेक्सबॉक्स मॉडल आइटम को अलाइन और एडजस्ट करना आसान है। जिसे रेस्पॉन्सिव वेबसाइट लेआउट स्ट्रक्चर के लिए उपयोग कर सकते है।
- Grid Box Model – मौजूदा वेब पेज में काम्प्लेक्स वेबसाइट लेआउट स्ट्रक्चर डिज़ाइन के लिए 2-डायमेंशनल लेआउट प्रदान करता है, जहा रौस और कॉलम को मैन्युअल कस्टम एडिट और कण्ट्रोल कर सकते है।
