विषयसूची:

आप फ्लेक्सबॉक्स और ग्रिड का उपयोग कैसे करते हैं?
आप फ्लेक्सबॉक्स और ग्रिड का उपयोग कैसे करते हैं?

वीडियो: आप फ्लेक्सबॉक्स और ग्रिड का उपयोग कैसे करते हैं?

वीडियो: आप फ्लेक्सबॉक्स और ग्रिड का उपयोग कैसे करते हैं?
वीडियो: फ्लेक्सबॉक्स या ग्रिड - कैसे तय करें? 2024, नवंबर
Anonim

हम तब से वेब पर तत्वों को पंक्तियों और स्तंभों के रूप में व्यवस्थित कर रहे हैं उपयोग किया गया लेआउट के लिए टेबल। दोनों फ्लेक्सबॉक्स और ग्रिड इस अवधारणा पर आधारित हैं। फ्लेक्सबॉक्स तत्वों को एक पंक्ति या एक कॉलम में व्यवस्थित करने के लिए सबसे अच्छा है। ग्रिड एकाधिक पंक्तियों और स्तंभों में तत्वों को व्यवस्थित करने के लिए सर्वोत्तम है।

इसके बाद, कोई यह भी पूछ सकता है कि क्या आप फ्लेक्सबॉक्स और ग्रिड का एक साथ उपयोग कर सकते हैं?

अधिकतर नहीं। ग्रिड की तुलना में बहुत नया है फ्लेक्सबॉक्स और थोड़ा कम ब्राउज़र समर्थन है। वे कर सकते हैं काम साथ में : ए ग्रिड मद कर सकते हैं एक हो फ्लेक्सबॉक्स कंटेनर। ए फ्लेक्स मद कर सकते हैं एक हो ग्रिड कंटेनर।

इसी तरह, सीएसएस ग्रिड फ्लेक्सबॉक्स से बेहतर है? सीएसएस ग्रिड 2डी लेआउट के लिए हैं। यह दोनों पंक्तियों और स्तंभों के साथ काम करता है। फ्लेक्सबॉक्स काम करता है बेहतर केवल एक आयाम में (या तो पंक्तियाँ या कॉलम)। यह अधिक यदि आप एक ही समय में दोनों का उपयोग करते हैं तो समय की बचत और सहायक।

तदनुसार, फ्लेक्सबॉक्स ग्रिड क्या है?

फ्लेक्सबॉक्स एक आयामी लेआउट के लिए बनाया गया है और ग्रिड दो आयामी लेआउट के लिए बनाया गया है। इसका मतलब यह है कि यदि आप एक दिशा में आइटम बिछा रहे हैं (उदाहरण के लिए हेडर के अंदर तीन बटन), तो आपको इसका उपयोग करना चाहिए फ्लेक्सबॉक्स : यह आपको CSS की तुलना में अधिक लचीलापन देगा ग्रिड.

आपको फ्लेक्सबॉक्स कब नहीं लेना चाहिए?

फ्लेक्सबॉक्स का सेवन कब नहीं करना चाहिए

  1. पेज लेआउट के लिए फ्लेक्सबॉक्स का उपयोग न करें। प्रतिक्रियाशील पृष्ठ लेआउट बनाने के लिए प्रतिशत, अधिकतम-चौड़ाई और मीडिया प्रश्नों का उपयोग करने वाला एक बुनियादी ग्रिड सिस्टम अधिक सुरक्षित तरीका है।
  2. डिस्प्ले न जोड़ें: फ्लेक्स; हर एक कंटेनर div के लिए।
  3. यदि आपके पास IE8 और IE9 से बहुत अधिक ट्रैफ़िक है, तो flexbox का उपयोग न करें।

सिफारिश की: