फ्लेक्सबॉक्स बनाम ट्विटर बूटस्ट्रैप (या समान रूपरेखा) [बंद]


161

मुझे हाल ही में पता चला है कि Flexboxजब मैं एक ही हाइट बनाने के लिए एक समाधान की तलाश कर रहा था, तो उच्चतम पर निर्भर करता है।

मैंने CSS-tricks.com पर निम्न पृष्ठ पढ़ा है और इसने मुझे आश्वस्त किया कि flexboxयह सीखने और उपयोग करने के लिए एक बहुत शक्तिशाली मॉड्यूल है। हालांकि, इसने मुझे इस तथ्य के बारे में भी बताया कि ट्विटर बूटस्ट्रैप (और इसी तरह के ढांचे) अपने ग्रिड सिस्टम के साथ एक ही तरह के फ़ंक्शन (निश्चित रूप से बहुत अतिरिक्त) प्रदान करते हैं।

अब, सवाल ये हैं: पेशेवरों और विपक्षों के क्या हैं flexbox? क्या ऐसा कुछ है जो फ्लेक्सबॉक्स के साथ नहीं कर सकता है जो एक बूटस्ट्रैप जैसे ढांचे के साथ कर सकता है (बेशक विशुद्ध रूप से ग्रिड सिस्टम के बारे में बात कर रहा है)? वेबसाइट पर लागू होने पर कौन सा तेज़ है?

मैं अनुमान लगा रहा हूं कि केवल ग्रिड सिस्टम के लिए, यह विशुद्ध रूप से उपयोग करने के लिए अधिक स्मार्ट है flexbox, लेकिन क्या होगा यदि आप पहले से ही एक फ्रेमवर्क का उपयोग कर रहे हैं, क्या कुछ flexboxजोड़ सकता है?

क्या किसी flexboxढांचे के ऊपर "ग्रिड सिस्टम" चुनने का कोई कारण है ?


5
मैं बूटस्ट्रैप के साथ फ्लेक्सबॉक्स का उपयोग करता हूं।
ऐब्रीएन

2
Zurb के फाउंडेशन फॉर एप्स पर एक नजर । यह पूरी तरह से फ्लेक्सबॉक्स ग्रिड सिस्टम के ऊपर बनाया गया है
सेलम औएरडानी


1
बूटस्ट्रैप 4 अब डिफ़ॉल्ट रूप से फ्लेक्सबॉक्स है! Flexbox एक बेहद शक्तिशाली लेआउट उपकरण है, जो ग्रिड सिस्टम और कोर घटकों को अद्वितीय लचीलापन और नियंत्रण प्रदान करता है। यह IE9 समर्थन छोड़ने की लागत पर आता है, लेकिन घटक लेआउट, संरेखण और आकार में महत्वपूर्ण सुधार लाता है।
नौर्मियन बराकट

5
मैं असहमत हूं कि इसे राय के आधार पर बंद किया जाना चाहिए। पूछने वाला तथ्य की तलाश में है, राय की नहीं। "फ्लेक्सबॉक्स के पेशेवरों और विपक्ष क्या हैं?" पूछने वाला (मेरे जैसा) प्रत्येक सिस्टम के मजबूत और कमियों को निर्धारित करने की कोशिश कर रहा है।
डारिन कार्डिन

जवाबों:


107

कुछ कारणों से, फ्लेक्सबॉक्स बूटस्ट्रैप से बहुत बेहतर है:

  • बूटस्ट्रैप ग्रिड सिस्टम बनाने के लिए फ्लोट्स का उपयोग करता है, जो कई कहेंगे कि वेब के लिए नहीं है, जहां फ्लेक्स-बॉक्स आइटम के आकार और सामग्री के लिए लचीला रहकर विपरीत करता है; पिक्सेल बनाम ईएम / रेम का उपयोग करने या अपने मार्जिन को नियंत्रित करने और पैडिंग का उपयोग करने और कभी भी पूर्व-निर्धारित आकार निर्धारित न करने जैसा ही अंतर।

  • बूटस्ट्रैप, क्योंकि यह फ़्लोट्स का उपयोग करता है, प्रत्येक पंक्ति के बाद स्पष्टता की आवश्यकता होती है, या आपको अलग-अलग ऊँचाई के गलत संकेत दिए जाएंगे। फ्लेक्स-बॉक्स ऐसा नहीं करता है और इसके बजाय कंटेनर में सबसे लंबे डिव के लिए जांच करता है और इसकी ऊंचाई तक चिपक जाता है।

फ्लेक्स-बॉक्स पर बूटस्ट्रैप के साथ जाने का एकमात्र कारण ब्राउज़र समर्थन (IE मुख्य रूप से) (पहले से ही मरना) की कमी है। और कभी-कभी आपको क्रोम और सफारी से अलग व्यवहार मिलता है, भले ही दोनों एक ही वेबकिट इंजन का उपयोग करते हों।

संपादित करें:

BTW यदि आप केवल समस्या का सामना कर रहे हैं, समान ऊंचाई वाले कॉलम हैं, तो उसके लिए कुछ समाधान हैं:

  • आप display: tableमाता-पिता display: table-cell;पर, बच्चे पर उपयोग कर सकते हैं । देखें कि प्रदर्शन में समान ऊंचाई कैसे प्राप्त करें: टेबल-सेल

  • आप प्रत्येक div पर पूर्ण स्थिति का उपयोग कर सकते हैं:
    position: absolute; top: 0; bottom: 0;

  • वहाँ भी jquery / JS समाधान है, और एक और समाधान मुझे उस समय याद नहीं रह सकता है जिसे मैं बाद में जोड़ने की कोशिश करूँगा।

2 संपादित करें:

इसके अलावा http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties पर अपने फ्लेक्स-बॉक्स कार्यों की जांच करें।

संपादन 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

संपादन 4: https://caniuse.com/#feat=flexbox


1
आपके कमेंट के लिए धन्यवाद। मुझे इस बात पर कोई स्पष्टीकरण नहीं मिला कि दोनों में से "बेहतर" क्या था, इसलिए मुझे उम्मीद है कि मेरे सवाल (और आपके और भविष्य के उत्तर) मुझे निर्णय लेने में मदद करेंगे। सौभाग्य से, IE 11 को संयुक्त रूप से पिछले तीन संस्करणों की तुलना में एक बड़ा बाजार हिस्सा मिल रहा है (जिनमें से IE10 समर्थन करता है flexbox), इसलिए मेरी नजर में इसका उपयोग करना सुरक्षित है। एक रूपरेखा के संयोजन का उपयोग करने के बारे में आपकी क्या राय है और flexbox? बेशक, इसका उपयोग करते समय ढांचे की ग्रिड प्रणाली की उपेक्षा करना।
रिवरवर्ट

2
फ्लेक्सबॉक्स का उपयोग अधिक शक्तिशाली ग्रिड सिस्टम को आसान तरीके से बनाने के लिए किया जा सकता है, लेकिन अपने आप में ग्रिड सिस्टम नहीं है। बेहतर, सरल ग्रिड सिस्टम कुछ विचारों को दर्शाता है और ऐप्स के लिए ZURB Foundation लेआउट उद्देश्यों के लिए फ्लेक्सबॉक्स का उपयोग करता है
ckuijjer

यदि आप चाहते हैं कि वास्तव में आप यू का उपयोग कर सकते हैं, जो कि मेरा मानना ​​है कि सबसे अच्छा विकल्प है क्योंकि यू को किसी ऐसे चीज़ के इर्द-गिर्द दिमाग लगाने की ज़रूरत नहीं है जिसका उपयोग आप पहले से ही काफी समय से कर रहे हैं (जैसे उन लोगों के लिए जो आगे कुछ भी नहीं जानते हैं बीएस), लेकिन मेरे लिए फ्लेक्स-बॉक्स का विक्रय बिंदु यह है कि यह एक ही लचीलापन है जो केवल जेएस का उपयोग करके प्राप्त किया जा सकता है लेकिन कोड की एक पंक्ति लिखे बिना।
ctf0

पूर्ण संगतता डेटा: caniuse.com/#feat=flexbox ध्यान दें कि पुराने Android में भी समस्याएँ हैं।
cvrebert

बांध, और मुझे लगा कि हम लगभग इसका उपयोग कर रहे हैं, ऐसा लगता है कि यह एक और साल लग जाएगा या कुछ बी 4 हम इसे जंगली में देखते हैं, हेड-अप के लिए।
ctf0

6

मैं फ्लेक्सबॉक्स का उपयोग करता हूं (मैंने इसके बारे में पढ़ा है और यह बहुत अच्छा लगता है) लेकिन मैं बूटस्ट्रैप फ्रंटेंड देव हूं। मेरा सुझाव है कि अंतिम निर्णय लेने से पहले आप फ्लेक्सबॉक्स प्रिंटिंग पृष्ठों का परीक्षण करें। तुम्हें पता है ... कभी-कभी मुद्रण शैलियों में एक भयानक सिरदर्द होता है और बूटस्ट्रैप मुझे बहुत मदद करता है जब मुझे प्रिंट प्रारूप तैयार करना होता है।


यही कारण है कि आप बूटस्ट्रैप प्रिंट कक्षाओं के साथ संयोजन के रूप में प्रिंट करने योग्य
डिव के

1

मुझे डर है कि आप सीएसएस ट्रिक्स का एक और लेख याद कर रहे हैं :

नोट: फ्लेक्सबॉक्स लेआउट किसी एप्लिकेशन और छोटे पैमाने के लेआउट के लिए सबसे उपयुक्त है, जबकि ग्रिड लेआउट बड़े पैमाने पर लेआउट के लिए है।

इसका मतलब यह नहीं है, आप कोशिश नहीं कर सकते, लेकिन सिर्फ दो बार सोचें। और सभी अंत में वांछित ब्राउज़र समर्थन पर निर्भर करता है।


24
सुनिश्चित करें कि आप समझते हैं कि लेख एक नए उभरते ग्रिड लेआउट के बारे में बात कर रहा है - बूटस्ट्रैप की ग्रिड नहीं।
14

5
कहना होगा कि मुझे याद किया! :) सुधार के लिए धन्यवाद।
Kout

Upvoted, आपने एक बहुत स्पष्ट अंतर बताया है कि कैसे इरादे और उद्देश्य के संघर्ष के बिना फ्लेक्स बॉक्स और ग्रिड का उपयोग करें, और मेरे लिए, यह कोई फर्क नहीं पड़ता कि आपका मतलब बूटस्ट्रैप ग्रिड या ग्रिड अय्यट से है
अहमद फारुक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.