सीएसएस फ्लेक्सबॉक्स
1
2
3
4
5
6
7
8
सीएसएस फ्लेक्सबॉक्स लेआउट मॉड्यूल
फ्लेक्सबॉक्स लेआउट मॉड्यूल से पहले, चार लेआउट मोड थे:
- वेबपेज में अनुभागों के लिए ब्लॉक करें
- इनलाइन, टेक्स्ट के लिए
- तालिका, द्वि-आयामी तालिका डेटा के लिए
- किसी तत्व की स्पष्ट स्थिति के लिए स्थित है
फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल, फ्लोट या पोजिशनिंग का उपयोग किए बिना लचीली उत्तरदायी लेआउट संरचना को डिजाइन करना आसान बनाता है।
ब्राउज़र समर्थन
फ्लेक्सबॉक्स गुण सभी आधुनिक ब्राउज़रों में समर्थित हैं।
| 29.0 | 11.0 | 22.0 | 10 | 48 |
फ्लेक्सबॉक्स तत्व
फ्लेक्सबॉक्स मॉडल का उपयोग शुरू करने के लिए, आपको पहले एक फ्लेक्स कंटेनर को परिभाषित करना होगा।
1
2
3
उपरोक्त तत्व तीन फ्लेक्स आइटम के साथ एक फ्लेक्स कंटेनर (नीला क्षेत्र) का प्रतिनिधित्व करता है।
उदाहरण
तीन फ्लेक्स आइटम वाला एक फ्लेक्स कंटेनर:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
आप अगले अध्यायों में फ्लेक्स कंटेनर और फ्लेक्स आइटम के बारे में अधिक जानेंगे।