Responsive layouts with Flexbox In Hindi
एचटीएमएल वेब पेज में सीएसएस फ्लेक्सबोक्स प्रॉपर्टीज का उपयोग कर किसी भी तरह के वेबसाइट वेब पेज रिस्पॉन्सिव वेबसाइट लेआउट बना सकते है. जिससे की आपका द्वारा डिज़ाइन सीएसएस बेस्ड ऑब्जेक्ट विभिन्न डिवाइस स्क्रीन साइज़ पर कम्पेटिबल और प्रॉपर आर्डर में अट्रैक्टिव और कमर्शियल प्रीव्यू हो सके। वेब डेवलपमेंट में सीएसएस फ्लेक्सबोक्स प्रॉपर्टीज का उपयोग कर काम्प्लेक्स मीडिया ऑब्जेक्ट क्वेरी की आवश्यकता के बिना फ्लेक्सिबल और कस्टमाइज कस्टम वेब पेज डिज़ाइन लेआउट करने में हेल्प करते है।
Creating responsive layout through CSS Flexbox 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>Let Tray Responsive Flexbox Layout In Css</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<header class=”header”>Website Header Menu Area</header>
<div class=”flex-container”>
<div class=”flex-item”>Home</div>
<div class=”flex-item”>Blog</div>
<div class=”flex-item”>Contact</div>
<div class=”flex-item”>About</div>
</div>
<br>
<footer class=”footer”>Website Footer Menu Area </footer>
</body>
</html>
Flexbox properties in CSS.
- flex-direction – यह मौजूदा एचटीएमएल वेब पेज में डिवाइस स्क्रीन साइज़ के अनुसार उपयोग सीएसएस फ्लेक्सबोक्स एलिमेंट की डायरेक्शन को मैनेज करता है।
- flex-wrap – यह मौजूदा एचटीएमएल वेब पेज में फ्लेक्स कंटेंट आइटम एलिमेंट को कई लाइनों पर व्रैप करता है।
- justify-content – यह मौजूदा एचटीएमएल वेब पेज सीएसएस में कंटेनर के भीतर ऑब्जेक्ट आइटम को मैन एक्सिस के अनुसार प्रॉपर अलाइन करता है।
- align-items – यह मौजूदा एचटीएमएल सीएसएस वेब पेज में क्रॉस एक्सिस के आधार पर फ्लेक्स आइटम को प्रॉपर अलाइन करता है।
- flex-basis and flex-grow – यह मौजूदा एचटीएमएल सीएसएस वेब पेज में कंटेंट या आइटम को अवेलेबल लोकेशन के आधार पर उनके डिफ़ॉल्ट साइज को कस्टमाइज करने में हेल्प करता है।
Responsive Flexbox Layout Example in HTML Web Page CSS.
तो चलिए एचटीएमएल सीएसएस वेब पेज में फ्लेक्सबोक्स के साथ एक सिंपल रिस्पॉन्सिव वेब पेज लेआउट को क्रिएट करे. जो यूजर डिवाइस स्क्रीन साइज़ के अनुसार बदलने के साथ ही स्वयं अनुकूलित हो जाए।
Here is a basic HTML CSS web page structure.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Explore Responsive Flexbox Css Layout Design</title>
<style>
body {
margin: 0;
font-family: times new roman;
}
.header, .footer {
background-color: teal;
color: yellow;
padding: 15px;
text-align: center;
}
.flex-container {
display: flex;
flex-wrap: wrap; /* it automatically wraps text to next line */
justify-content: space-around; /* it distributes all around space */
padding: 15px;
}
.flex-item {
background-color: pink;
color: #232;
margin: 3px;
padding: 7px;
flex: 1 1 300px; /* it grows and shrink item attribute */
text-align: left;
border-radius: 10px;
}
/* flex properties Responsive adjustments */
@media (max-width: 700px) {
.flex-container {
flex-direction: column; /* it aligns item in samll screen device or gadgets */
align-items: left; /* it displays item in left direction */
}
.flex-item {
flex: 1 1 200%; /* it displays Full width on small device screens */
}
}
</style>
</head>
<body>
<header class=”header”>WebPage Header Area</header>
<div class=”flex-container”>
<div class=”flex-item”>Home</div>
<div class=”flex-item”>Blog</div>
<div class=”flex-item”>Contact Us</div>
<div class=”flex-item”>About Us</div>
<div class=”flex-item”>Pages</div>
<div class=”flex-item”>Disclaimers</div>
</div>
<footer class=”footer”>WebPage Footer Area</footer>
</body>
</html>
About Flex Container in CSS.
Flex Container properties:
- display: flex;: – यह एचटीएमएल वेब पेज में सीएसएस एक फ्लेक्स कंटेनर बिहैवियर को डिफाइन करता है।
- flex-wrap: wrap;: – मौजूदा एचटीएमएल वेब पेज में सीएसएस कंटेनर में क्रिएटेड फ्लेक्स आइटम ओवरफ्लो होते हैं. तो यह प्रॉपर्टीज उन्हें अपने आप नेक्स्ट लाइन में मूव या व्रैप करने में सहायता करता है।
- justify-content: space-around;: – यह मौजूदा एचटीएमएल वेब पेज में सीएसएस कंटेनर में क्रिएटेड आइटम के अराउंड डिस्ट्रीब्यूट करता है।
Flex items:
- flex: 1 1 200px;: – यह मौजूदा एचटीएमएल वेब पेज में सीएसएस शॉर्टहैंड फ्लेक्स आइटम को सेट करता है.
- flex-grow: – यह डिफ़ॉल्ट एचटीएमएल वेब पेज में सीएसएस 1 आइटम स्पेस को फील कर मूव करता है।
- flex-shrink: – यह डिफ़ॉल्ट एचटीएमएल वेब पेज में सीएसएस 1 को ओवरफ्लो होने से उन्हें श्रिंक करते है।
- flex-basis: – यह डिफ़ॉल्ट एचटीएमएल वेब पेज में सीएसएस 200px फ्लेक्स आइटम का इनिशियल साइज डिफाइन है।
यहाँ ऊपर दिया गया फ्लेक्स आइटम कंटेनर सेटअप मिनिमम चौड़ाई बनाए रखते हुए फ्लेक्स आइटम को आकार में आटोमेटिक फ्लेक्सिबल करता है।
CSS Flexbox Properties in HTML Web Page.
एचटीएमएल वेब पेज में सीएसएस आइटम को कई लाइनों पर व्रैप करने के लिए flex-wrap फ्लेक्सबोक्स व्रैप प्रॉपर्टीज का उपयोग करें।
कस्टम वेब डेवलपमेंट जरूरत के अनुसार विभिन्न स्क्रीन साइज आकारों पर विभिन्न इलेक्ट्रॉनिक डिवाइस और गैजेट्स लेआउट के लिए flex-direction प्रॉपर्टीज को मैन्युअल एडजस्ट कर कस्टमाइज करे।
स्पेसिफिक और बेहतर यूजर रिस्पांस के लिए वेब पेज व्यूपोर्ट की विड्थ के अकॉर्डिंग स्टाइल्स को बदलने के लिए मीडिया क्वेरी ट्राय करे।
