सीएसएस फ्लेक्स उत्तरदायी
उत्तरदायी फ्लेक्सबॉक्स
आपने CSS मीडिया क्वेरीज़ अध्याय से सीखा है कि आप विभिन्न स्क्रीन आकारों और उपकरणों के लिए अलग-अलग लेआउट बनाने के लिए मीडिया क्वेरीज़ का उपयोग कर सकते हैं।
लैपटॉप और डेस्कटॉप:
मोबाइल
और टैबलेट:उदाहरण के लिए, यदि आप अधिकांश स्क्रीन आकारों के लिए दो-स्तंभ लेआउट बनाना चाहते हैं, और छोटे स्क्रीन आकारों (जैसे फ़ोन और टैबलेट) के लिए एक-स्तंभ लेआउट बनाना चाहते हैं, तो आप flex-direction
से row
को column
एक विशिष्ट ब्रेकपॉइंट पर (800px में ) बदल सकते हैं। नीचे उदाहरण):
उदाहरण
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
flex
दूसरा तरीका यह है कि विभिन्न स्क्रीन आकारों के लिए अलग-अलग लेआउट बनाने के लिए फ्लेक्स आइटम की संपत्ति का प्रतिशत बदलना । ध्यान दें कि flex-wrap: wrap;
इस उदाहरण के काम करने के लिए हमें फ्लेक्स कंटेनर पर भी शामिल करना होगा:
उदाहरण
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
फ्लेक्सबॉक्स का उपयोग करके उत्तरदायी छवि गैलरी
स्क्रीन आकार के आधार पर चार, दो या पूर्ण-चौड़ाई वाली छवियों के बीच भिन्न-भिन्न हो सकने वाली प्रतिक्रियाशील छवि गैलरी बनाने के लिए फ्लेक्सबॉक्स का उपयोग करें:
फ्लेक्सबॉक्स का उपयोग कर उत्तरदायी वेबसाइट
लचीली नेविगेशन बार और लचीली सामग्री वाली प्रतिक्रियाशील वेबसाइट बनाने के लिए फ्लेक्सबॉक्स का उपयोग करें: