Flex Properties: Justify-content, Align-items, Flex-direction In Hindi
एचटीएमएल वेब पेज में रेस्पॉन्सिव वेबसाइट बॉक्स मॉडल या रेस्पॉन्सिव मेनू आइटम या अन्य किसी भी प्रकार के ऑटो एडजस्ट वेब फ्लेक्स बॉक्स लेआउट या स्ट्रक्चर बनाने के लिए फ्लेक्सबोक्स एक इम्पोर्टेन्ट डिज़ाइन स्ट्रक्चर फीचर्स है. जहा आप डिज़ाइन फ्लेक्सबोक्स कंटेनर के अंदर डिजायर टेक्स्ट, इमेज, मल्टीमीडिया ऑब्जेक्ट, या अन्य वेबसाइट डिजिटल कंटेंट और इनफार्मेशन को एक रेस्पॉन्सिव आर्डर के साथ प्रॉपर एलाइनमेंट, डायरेक्शन, जस्टिफाई कंटेंट, आदि में कस्टम फ्लेक्स ऐट्रिब्यूट्स और इफ़ेक्ट को अप्लाई कर सकते है।
So, let’s get to know the multiple flexbox properties in HTML web page. Which includes flex alignment, flex direction, justify content, etc.
Flex Direction Properties in CSS.
किसी भी एचटीएमएल वेब पेज में सीएसएस फ्लेक्स-डायरेक्शन प्रॉपर्टीज को मौजूदा फ्लेक्स कंटेनर में अप्लाई करने से आप एक्टिव फ्लेक्सबॉक्स एलिमेंट या आइटम के लिए डायरेक्शन फिक्स करते है. जहा आप फ्लेक्स आइटम डायरेक्शन आर्डर को रौ, रौ रिवर्स, कॉलम, और कॉलम रिवर्स आर्डर में प्रीव्यू कर सकते है।
Flexbox item default direction attributes features.
- row (default) attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को लेफ्ट टू राइट रौ आर्डर में प्रीव्यू करता है।
- row-reverse attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को राइट टू लेफ्ट रौ आर्डर में प्रीव्यू करता है।
- column attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को टॉप टू बॉटम कॉलम आर्डर में प्रीव्यू करता है।
- column-reverse attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को बॉटम टू टॉप कॉलम आर्डर में प्रीव्यू करता है।
CSS flex-direction properties example.
.flexbox-model {
display: flex;
flex-direction: row; /* it display flex item in row order */
}
Flex Justify Content Properties in CSS.
किसी भी एचटीएमएल वेब पेज में सीएसएस फ्लेक्स-जस्टिफाई कंटेंट प्रॉपर्टीज को फ्लेक्स एलिमेंट के मैन एक्सिस आर्डर में अलाइन कर प्रीव्यू करता है. जहा आप मौजूदा फ्लेक्स एलिमेंट जस्टिफाई कंटेंट ऐट्रिब्यूट्स में स्टार्ट, एन्ड, स्पेस-बिटवीन, स्पेस-अराउंड, स्पेस-एक्वाली, आदि फ्लेक्स कंटेंट ऐट्रिब्यूट्स को मैन्युअल रूप से अप्लाई कर सकते है।
Flexbox item default Justify Content attributes features.
- flex-start attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को स्टार्ट आर्डर में प्रीव्यू करता हैं।
- flex-end attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम कंटेनर के एन्ड आर्डर में प्रीव्यू करता हैं।
- center attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को मैन एक्सिस से सेंटर आर्डर में प्रीव्यू होता हैं।
- space-between attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को इक्वाली आर्डर में डिस्ट्रीब्यूट करता हैं, जहा फर्स्ट फ्लेक्स आइटम स्टार्ट में और एन्ड फ्लेक्स एलिमेंट आइटम को एन्ड में प्रीव्यू करता है।
- space-around attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को इक्वल आर्डर में प्रीव्यू करता हैं. जहा फ्लेक्स आइटम एलिमेंट के सर्राउंड इक्वल स्पेस प्रीव्यू होता है।
- space-evenly attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम के मध्य इक्वल स्पेस डिस्ट्रीब्यूट होता हैं, जहा यह फ्लेक्स आइटम के आउटर कार्नर भी इन्क्लूड प्रीव्यू होते हैं।
CSS flex-Justify Content properties example.
.flexbox-model {
display: flex;
justify-content: space-evenly; /* it display flex item space evenly */
}
Flex Align Item Properties in CSS.
किसी भी एचटीएमएल वेब पेज में सीएसएस फ्लेक्स-अलाइन-आइटम प्रॉपर्टीज को
फ्लेक्स क्रॉस एक्सिस आर्डर में अलाइन कर प्रीव्यू करता है. इसके अतिरिक्त आप फ्लेक्स आइटम एलाइनमेंट में फ्लेक्स स्टार्ट, फ्लेक्स एन्ड, फ्लेक्स सेंटर, बेसलाइन, और स्ट्रेच एलाइनमेंट, ऐट्रिब्यूट्स को कस्टम अप्लाई कर सकते है।
Flexbox item Align Item attributes features.
- flex-start attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम कंटेनर के स्टार्ट में अलाइन करता हैं।
- flex-end attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम कंटेनर के एन्ड में अलाइन कर प्रीव्यू करता हैं।
- center attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को क्रॉस एक्सिस सेंटर आर्डर में अलाइन करता हैं।
- baseline attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम कंटेनर को बेसलाइन आर्डर में प्रीव्यू कर अलाइन करता हैं।
- stretch attributes – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम कंटेनर स्ट्रेच आर्डर में फील कर प्रीव्यू करता है।
CSS flex-Align Item properties example.
.flexbox-model {
display: flex;
align-items: stretch; /* it display flexbox item stretch order */
}
Here is an HTML and CSS example to demonstrate flexbox item properties.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Multiple Flexbox Attributes </title>
<style>
body {
font-family: sogui;
margin: 1;
padding: 1;
display: flex;
justify-content: left; /* it display flex container left direction */
align-items: center; /* it display center item */
height: 140vh; /* it display full view port height */
}
.flexbox-model {
display: flex;
flex-direction: row; /* it display flexbox model item row order */
justify-content: space-around; /* it display space around flexbox */
align-items: center; /* it align flexbox item center */
padding: 14px;
background-color: #80deea;
border: 2px solid yellow;
width: 100%; /* it display flexbox container width */
max-width: 700px; /* used to display max width */
}
.flexbox-element {
background-color: #5d4037 ; /* it display flex element color */
color: yellow; /* display flex item color */
padding: 20px; /* display flex item inside space*/
margin: 14px; /* display margin space outside item */
border-radius: 30px; /* display flex item round corner */
flex: 1; /* display flex item grow eqaul */
text-align: center; /* align flex item text center */
}
</style>
</head>
<body>
<div class=”flexbox-model”>
<div class=”flexbox-element”>Kotlin</div>
<div class=”flexbox-element”>Ruby</div>
<div class=”flexbox-element”>Matlab</div>
<div class=”flexbox-element”>Swift</div>
<div class=”flexbox-element”>Python</div>
</div>
</body>
</html>
Multiple flex properties explanation.
- flex-direction properties – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम डायरेक्शन को प्रीव्यू करते है. जहा डिफ़ॉल्ट आप फ्लेक्स डायरेक्शन प्रॉपर्टीज में रौ, रौ-रिवर्स, कॉलम, कॉलम-रिवर्स, आर्डर में प्रीव्यू कर सकते है।
- Justify-content properties – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम कंटेनर में मैन एक्सिस आर्डर में प्रीव्यू कर सकते है. जिसमे, फ्लेक्स-स्टार्ट, फ्लेक्स-एंड, सेंटर, स्पेस-बीटवीन, स्पेस-अराउंड, स्पेस-इवनली, आर्डर में फ्लेक्स आइटम को अलाइन कर प्रीव्यू करते है।
- align-items properties – मौजूदा वेब पेज में फ्लेक्सबोक्स आइटम को आइटम कंटेनर क्रॉस एक्सिस में फ्लेक्स-स्टार्ट, फ्लेक्स-एंड, सेंटर, बेसलाइन, स्ट्रेच, आर्डर के साथ आइटम को अलाइन कर प्रीव्यू कर सकते है।
