Setting up a Flex Container In Hindi
एचटीएमएल वेब पेज में सीएसएस में फ्लेक्स बॉक्स मॉडल या कंटेनर को पहले हम सीएसएस में पढ़ चुके है. आपको सीएसएस में कई प्रकार के बॉक्स मॉडल प्रॉपर्टीज ऑप्शन मिलते है. जिन्हे वेब डेवलपर अपनी जरूरत के अनुसार उपयोग कर सकते है. इसी क्रम में फ्लेक्स बॉक्स मॉडल या फ्लेक्सबोक्स कंटेनर वेब डेवलपर को सीएसएस की सहायता से एक कम्पलीट फ्लेक्सिबल आल डिवाइस और गैजेट्स कम्पेटिबल रेस्पॉन्सिव वेब लेआउट स्ट्रक्चर बनाने में हेल्प करते है. फ्लेक्सबोक्स कंटेनर में क्रिएट की गई सभी कंटेंट आइटम एलिमेंट को प्रॉपर अलाइन और जस्टिफाई या डिस्ट्रीब्यूट किया जाता है।
So, let’s understand the flexbox container using CSS in HTML web page step by step.
Step 1 – First create the HTML web page structure.
यदि आप अपने वेब पेज में फ्लेक्स कंटेनर आइटम को डिस्प्ले करने चाहते है, तो आपको पहले एक एचटीएमएल स्ट्रक्चर लेआउट को बनाना होगा। जो आपके डिज़ाइन वेबपेज में फ्लेक्स कंटेनर और उसके सब एलिमेंट आइटम को डिस्प्ले करेगी।
Step 2 – Now create the CSS code for the flex container.
अब आपको अपनी एचटीएमएल वेब पेज के लिए फ्लेक्स कंटेनर सीएसएस सोर्स कोड लिखना होगा। सबसे पहले फ्लेक्स कंटेनर फ्लेक्स प्रॉपर्टीज को मैन्युअल अपनी जरूरत के अनुसार अप्लाई करना होगा। यहाँ आप अपनी जरूरत के अनुसार अतिरिक्त फ्लेक्स कंटेनर लेआउट को कण्ट्रोल और कस्टम डिज़ाइन के लिए मैन्युअल कस्टम प्रॉपर्टीज भी अप्लाई कर सकते है।
.flexbox-holder {
display: flex; /* it used to display flexbox layout */
justify-content: space-between; /* it Aligns flexbox items between space */
align-items: left; /* it Aligns flexbox items in left */
padding: 20px; /* it display space among flex item */
background-color: red; /* it display flexbox container background color */
border: 2px solid yellow; /* it display flexbox container border with and color */
}
Step 3: Now apply the attributes to the flex items from CSS in the designed web page.
यहाँ आप अपने वेब पेज में उपयोग फ्लेक्स बॉक्स कंटेनर मॉडल के बेहतर प्रीव्यू के लिए सीएसएस फ्लेक्सबोक्स विजिबिलिटी, टेक्स्ट फोर्मत्टिंग्स, टेक्स्ट कंटेंट स्पेसिंग, कंटेंट एलाइनमेंट, कलर, विड्थ, मार्जिन के लिए कस्टम फ्लेक्स सीएसएस ऐट्रिब्यूट्स और स्टाइलिंग अप्लाई कर सकते है।
.flexbox-element {
background-color: aqua; /* it display aqua flexbox background color*/
color: yellow; /* it display Text color */
padding: 30px; /* its display Space among flex item */
margin: 13px; /* it display space outer side of flex item */
border-radius: 5px; /* it display flex box Rounded corners border radious */
flex: 1; /* it grow flex item equal */
text-align: center; /* it align flex item text in Center */
}
Flex box model attributes in CSS in HTML web page.
तो चलिए फ्लेक्सबॉक्स कंटेनर की कुछ डिफ़ॉल्ट और एडवांस प्रॉपर्टीज को समझे। जिन्हे हम फ्लेक्सबोक्स कंटेनर के रूप में उपयोग कर सकते है.
- flex-direction attributes – मौजूदा वेब पेज में फ्लेक्स आइटम की डायरेक्शन को इंडीकेट करता है।
- row (default) attributes – फ्लेक्सबोक्स आइटम को एक रौ में डिस्प्ले करता है।
- column attributes – मौजूदा फ्लेक्स कंटेनर आइटम को एक कॉलम में प्रीव्यू करता है।
- row-reverse attributes – फ्लेक्सबोक्स में फ्लेक्स आइटम को रिवर्स आर्डर में रौ में प्रीव्यू करता है।
- column-reverse attributes – फ्लेक्सबोक्स में फ्लेक्स आइटम को रिवर्स आर्डर में कॉलम में प्रीव्यू करता है।
- justify-content attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स कंटेनर आइटम को मैन एक्सिस पर अलाइन करता है।
- flex-start attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को शुरुआत की ओर स्टार्ट करता है।
- flex-end attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम को एन्ड की तरफ प्रीव्यू करता है।
- center attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम को सेंटर पोजीशन में प्रीव्यू करता है।
- space-between attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम के बीच में जगह के साथ समान रूप से स्पेस अलॉट करता है।
- space-around attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को उनके चारो तरफ सर्राउंड स्पेस अलॉट करता है।
- align-items attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को क्रॉस एक्सिस आर्डर में अलाइन करता है।
- flex-start attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम कंटेनर को स्टार्ट में अलाइन करता है।
- flex-end attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को कंटेनर के एन्ड में अलाइन करता है।
- center attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को सेंटर में अलाइन करता है।
- baseline attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को उनकी बेसलाइन के साथ अलाइन करता है।
- stretch attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को कंटेनर को फील के लिए स्ट्रेच ऐट्रिब्यूट्स अप्लाई करता है।
A complete flex box container properties and attributes example in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css FlexBox Model Container Script Code </title>
<style>
body {
font-family: sogui;
margin: 1;
padding: 1;
font-weight: bold;
}
.flexbox-model {
display: flex; /* it used to declare flexbox model layout */
justify-content: space-between; /* it used to align flex item according to axis */
align-items: center; /* it align flex item center */
padding: 7px; /* it add flexbox container padding */
background-color: #eceff1 ; /* it display flexbox container background color */
border: 1px solid blue; /* it display flexbox container border color */
}
.flexbox-element {
background-color: #5e35b1 ; /* it display flex item background color */
color: yellow; /* it display flex item Text yellow color */
padding: 20px; /* it display flex item Space inside */
margin: 10px; /* it display flex item Space outside */
border-radius: 40px; /* it display flex item Rounded corners */
flex: 1; /* it display flex item equally size */
text-align: center; /* it display flex item Center text */
}
</style>
</head>
<body>
<div class=”flexbox-model”>
<div class=”flexbox-element”>Css</div>
<div class=”flexbox-element”>Css3</div>
<div class=”flexbox-element”>Html</div>
<div class=”flexbox-element”>Html 5</div>
<div class=”flexbox-element”>JavaScript</div>
<div class=”flexbox-element”>Php</div>
<div class=”flexbox-element”>Jquery</div>
</div>
</body>
</html>
Flex box attributes properties explanation in css.
- मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को display: flex; प्रॉपर्टीज का उपयोग करके एक फ्लेक्स कंटेनर के रूप में डिक्लेअर कर सकते है।
- justify-content, align-items, और flex-direction जैसी फ्लेक्सबोक्स कंटेनर ऐट्रिब्यूट्स से फ्लेक्सबोक्स लेआउट को मैन्युअल रूप से कस्टमाइज कर सकते है।
- जहा आप मैन्युअली फ्लेक्सबोक्स आइटम को सीएसएस से स्टाइल कर सकते है
