Flexbox के लिए एक पूर्ण गाइड - सीएसएस-ट्रिक्स

पृष्ठभूमि

Flexbox Layout(लचीले बॉक्स) मॉड्यूल उद्देश्य का सबसे प्रभावशाली तरीका प्रदान (एक W3C उम्मीदवार अक्टूबर 2017 के रूप में सिफारिश) बाहर रखना, संरेखित और एक कंटेनर में आइटम के बीच अंतरिक्ष वितरित, तब भी जब उनके आकार अज्ञात और / या गतिशील है (इस प्रकार के शब्द "फ्लेक्स")।

फ्लेक्स लेआउट के पीछे मुख्य विचार कंटेनर को अपने आइटम की चौड़ाई / ऊंचाई (और क्रम) को बदलने के लिए उपलब्ध स्थान को भरने के लिए (ज्यादातर सभी प्रकार के प्रदर्शन उपकरणों और स्क्रीन आकार को समायोजित करने की क्षमता) देना है। एक फ्लेक्स कंटेनर उपलब्ध खाली स्थान को भरने के लिए वस्तुओं का विस्तार करता है या अतिप्रवाह को रोकने के लिए उन्हें सिकोड़ता है।

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

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

मूल और शब्दावली

चूंकि फ्लेक्सबॉक्स एक संपूर्ण मॉड्यूल है और कोई एकल गुण नहीं है, इसलिए इसमें गुणों के पूरे सेट सहित बहुत सी चीजें शामिल हैं। उनमें से कुछ कंटेनर (मूल तत्व, जिसे "फ्लेक्स कंटेनर" के रूप में जाना जाता है) पर सेट किया जाना है, जबकि अन्य का मतलब बच्चों पर सेट करना है ("फ्लेक्स आइटम" कहा जाता है)।

यदि "नियमित" लेआउट ब्लॉक और इनलाइन फ्लो दिशाओं पर आधारित है, तो फ्लेक्स लेआउट "फ्लेक्स-फ्लो दिशाओं" पर आधारित है। कृपया फ्लेक्स लेआउट के पीछे मुख्य विचार की व्याख्या करते हुए विनिर्देश के इस आंकड़े को देखें।

आइटम या तो निम्नलिखित बाहर रखी हो जाएगा main axis(से main-startकरने के लिए main-end) या (से पार अक्ष cross-startके लिए cross-end)।

मुख्य अक्ष - एक फ्लेक्स कंटेनर का मुख्य अक्ष प्राथमिक अक्ष होता है जिसके साथ फ्लेक्स आइटम बाहर रखे जाते हैं। खबरदार, यह जरूरी नहीं कि क्षैतिज हो; यह flex-directionसंपत्ति पर निर्भर करता है (नीचे देखें)।
मुख्य शुरुआत | मेन-एंड - फ्लेक्स आइटम को मेन-स्टार्ट से शुरू करके मेन-एंड तक जाने वाले कंटेनर के भीतर रखा जाता है।
मुख्य आकार - एक फ्लेक्स आइटम की चौड़ाई या ऊंचाई, जो भी मुख्य आयाम में है, वह आइटम का मुख्य आकार है। फ्लेक्स आइटम का मुख्य आकार संपत्ति या तो 'चौड़ाई' या 'ऊंचाई' संपत्ति है, जो भी मुख्य आयाम में है।
क्रॉस अक्ष - मुख्य अक्ष के लंबवत अक्ष को क्रॉस अक्ष कहा जाता है। इसकी दिशा मुख्य अक्ष दिशा पर निर्भर करती है।
क्रॉस-स्टार्ट | क्रॉस-एंड - फ्लेक्स लाइनों को आइटम से भर दिया जाता है और फ्लेक्स कंटेनर के क्रॉस-स्टार्ट साइड से शुरू होने वाले कंटेनर में रखा जाता है और क्रॉस-एंड की तरफ जाता है।
क्रॉस आकार - किसी फ्लेक्स आइटम की चौड़ाई या ऊंचाई, जो भी क्रॉस आयाम में है, आइटम का क्रॉस आकार है। क्रॉस आकार की संपत्ति जो भी हो 'चौड़ाई' या 'ऊंचाई' जो क्रॉस आयाम में है।

पोस्टर ले आओ!

इस गाइड एक बहुत संदर्भ? कार्यालय की दीवार पर एक प्रति चिपकाएँ।

पोस्टर खरीदें

माता-पिता
(फ्लेक्स कंटेनर) के लिए गुण

प्रदर्शन

यह एक फ्लेक्स कंटेनर को परिभाषित करता है; दिए गए मान के आधार पर इनलाइन या ब्लॉक। यह अपने सभी प्रत्यक्ष बच्चों के लिए एक फ्लेक्स संदर्भ प्रदान करता है।

.container ( display: flex; /* or inline-flex */ )

ध्यान दें कि सीएसएस कॉलम का फ्लेक्स कंटेनर पर कोई प्रभाव नहीं पड़ता है।

फ्लेक्स-दिशा

यह मुख्य अक्ष को स्थापित करता है, इस प्रकार दिशा फ्लेक्स आइटम को फ्लेक्स कंटेनर में रखा जाता है। Flexbox (वैकल्पिक रैपिंग से अलग) एक एकल-दिशा लेआउट अवधारणा है। फ्लेक्स आइटम को मुख्य रूप से क्षैतिज पंक्तियों या ऊर्ध्वाधर स्तंभों में से एक के रूप में सोचें।

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(डिफ़ॉल्ट): दाएं से बाएं ltr; दाएं से बाएंrtl
row-reverse: दाएं से बाएं ltr; दाएं से बाएंrtl
column: के रूप में ही rowलेकिन ऊपर से नीचे
column-reverse: समान row-reverseलेकिन नीचे से ऊपर

फ्लेक्स-रैप

डिफ़ॉल्ट रूप से, फ्लेक्स आइटम सभी एक लाइन पर फिट होने की कोशिश करेंगे। आप इसे बदल सकते हैं और इस संपत्ति के साथ आवश्यकतानुसार वस्तुओं को लपेटने की अनुमति दे सकते हैं।

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

nowrap (डिफ़ॉल्ट): सभी फ्लेक्स आइटम एक लाइन पर होंगे
wrap: फ्लेक्स आइटम ऊपर से नीचे तक कई लाइनों पर लिपटे रहेंगे।
wrap-reverse: फ्लेक्स आइटम नीचे से ऊपर तक कई लाइनों पर लपेटेंगे।

यहाँ कुछ दृश्य डेमो flex-wrapहैं।

फ्लेक्स-फ्लो

यह flex-directionऔर flex-wrapगुणों के लिए एक आशुलिपि है , जो एक साथ फ्लेक्स कंटेनर के मुख्य और क्रॉस एक्सिस को परिभाषित करते हैं। डिफ़ॉल्ट मान है row nowrap।

.container ( flex-flow: column wrap; )

औचित्य-सामग्री

यह मुख्य अक्ष के साथ संरेखण को परिभाषित करता है। यह अतिरिक्त मुक्त स्थान बचे हुए को वितरित करने में मदद करता है जब या तो एक लाइन पर सभी फ्लेक्स आइटम अनम्य होते हैं, या लचीले होते हैं लेकिन अपने अधिकतम आकार तक पहुंच गए हैं। जब वे लाइन को ओवरफ्लो करते हैं तो यह वस्तुओं के संरेखण पर कुछ नियंत्रण करता है।

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (डिफ़ॉल्ट): आइटम फ्लेक्स-दिशा की शुरुआत की ओर पैक किए जाते हैं।
flex-end: आइटम फ्लेक्स-दिशा के अंत में पैक किए जाते हैं।
start: आइटम दिशा की शुरुआत की ओर पैक किए जाते हैं writing-mode।
end: आइटम दिशा के अंत में पैक किए जाते हैं writing-mode।
left: आइटम कंटेनर के बाएं किनारे की ओर पैक किए जाते हैं, जब तक कि इसके साथ कोई मतलब नहीं है flex-direction, तब यह व्यवहार करता है start।
right: आइटम कंटेनर के दाहिने किनारे पर पैक किए जाते हैं, जब तक कि इसके साथ कोई मतलब नहीं होता है flex-direction, तब यह व्यवहार करता है end।
center: आइटम लाइन के साथ केंद्रित हैं
space-between: आइटम लाइन में समान रूप से वितरित किए जाते हैं; पहला आइटम स्टार्ट लाइन पर है, अंतिम लाइन अंतिम आइटम पर
space-around: आइटम समान रूप से उनके आसपास समान स्थान के साथ लाइन में वितरित किए जाते हैं। ध्यान दें कि नेत्रहीन स्थान समान नहीं हैं, क्योंकि सभी वस्तुओं में दोनों तरफ समान स्थान है। पहले आइटम में कंटेनर किनारे के खिलाफ एक इकाई स्थान होगा, लेकिन अगले आइटम के बीच अंतरिक्ष की दो इकाइयाँ क्योंकि उस अगले आइटम में अपना स्वयं का अंतर है जो लागू होता है।
space-evenly: आइटम वितरित किए जाते हैं ताकि किसी भी दो वस्तुओं (और किनारों के लिए जगह) के बीच अंतर बराबर हो।

ध्यान दें कि इन मूल्यों के लिए ब्राउज़र का समर्थन अति सूक्ष्म है। उदाहरण के लिए, space-betweenएज के कुछ संस्करणों से कभी समर्थन नहीं मिला, और Chrome में अभी तक प्रारंभ / समाप्ति / बाएँ / दाएँ नहीं हैं। एमडीएन के विस्तृत चार्ट हैं। सबसे सुरक्षित मान रहे हैं flex-start, flex-end, और center।

दो अतिरिक्त खोजशब्द भी हैं जिन्हें आप इन मूल्यों के साथ जोड़ सकते हैं: safeऔर unsafe। का उपयोग करना safeसुनिश्चित कि हालांकि आप स्थिति के इस प्रकार करते हैं, आप एक तत्व धक्का नहीं कर सकते हैं ऐसी है कि वह ऑफ स्क्रीन renders (जैसे ऊपर से) इस तरह की सामग्री भी स्क्रॉल नहीं किया जा सकता में है (जिसे "डेटा हानि") ।

संरेखित आइटम

यह इस बात के लिए डिफ़ॉल्ट व्यवहार को परिभाषित करता है कि कैसे फ्लेक्स आइटम को मौजूदा लाइन पर क्रॉस अक्ष के साथ बिछाया जाता है । justify-contentक्रॉस-अक्ष के लिए संस्करण के रूप में इसके बारे में सोचें (मुख्य-अक्ष के लंबवत)।

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (डिफ़ॉल्ट): कंटेनर को भरने के लिए खिंचाव (अभी भी न्यूनतम-चौड़ाई / अधिकतम-चौड़ाई का सम्मान करें)
flex-start/ start/ self-start: आइटम क्रॉस अक्ष की शुरुआत में रखे जाते हैं। इनमें अंतर सूक्ष्म है, और flex-directionनियमों या नियमों का सम्मान करने के बारे में writing-modeहै।
flex-end/ end/ self-end: आइटम क्रॉस अक्ष के अंत में रखे जाते हैं। अंतर फिर से सूक्ष्म है और flex-directionनियमों बनाम writing-modeनियमों का सम्मान करने के बारे में है।
center: आइटम क्रॉस-एक्सिस में केंद्रित हैं
baseline: आइटम को ऐसे संरेखित किया जाता है जैसे कि उनकी आधार रेखाएं संरेखित होती हैं

safeऔर unsafeसंशोधक कीवर्ड मदद से आप संरेखित तत्वों, अर्थात सामग्री दुर्गम हो जाता है को रोकने के साथ इन सभी कीवर्ड के बाकी (हालांकि टिप्पणी ब्राउज़र समर्थन), और सौदा के साथ संयोजन के रूप में इस्तेमाल किया जा सकता।

संरेखित सामग्री

यह एक फ्लेक्स कंटेनर की रेखाओं को संरेखित करता है जब क्रॉस-अक्ष में अतिरिक्त स्थान होता है, इसी तरह justify-contentमुख्य-अक्ष के भीतर अलग-अलग वस्तुओं को संरेखित करता है।

नोट: यह संपत्ति केवल बहु-लाइन लचीले कंटेनरों पर प्रभाव डालती है, जहां या flex-flowतो सेट है )। एक एकल-लाइन लचीला कंटेनर (यानी जहां इसके डिफ़ॉल्ट मान पर सेट है ) प्रतिबिंबित नहीं करेगा ।wrapwrap-reverseflex-flowno-wrapalign-content

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (डिफ़ॉल्ट): आइटम उनके डिफ़ॉल्ट स्थिति में पैक किए जाते हैं जैसे कि कोई मूल्य निर्धारित नहीं किया गया था।
flex-start/ start: कंटेनर की शुरुआत के लिए पैक किए गए आइटम। (अधिक समर्थित) दिशा का flex-startसम्मान करते flex-directionहुए startसम्मान करता writing-modeहै।
flex-end/ end: कंटेनर के अंत में पैक किए गए आइटम। (अधिक समर्थन) दिशा का सम्मान flex-endकरता है, flex-directionजबकि अंत का सम्मान करता writing-modeहै।
center: आइटम कंटेनर में केंद्रित है
space-between: आइटम समान रूप से वितरित; पहली पंक्ति कंटेनर के प्रारंभ में है जबकि अंतिम छोर पर है
space-around: आइटम समान रूप से प्रत्येक पंक्ति के आसपास समान स्थान के साथ वितरित किए जाते हैं
space-evenly: आइटम समान रूप से उनके आसपास समान स्थान के साथ वितरित किए जाते हैं
stretch: शेष स्थान को लेने के लिए लाइनों का खिंचाव

बच्चों के लिए गुण
(फ्लेक्स आइटम)

गण

डिफ़ॉल्ट रूप से, फ्लेक्स आइटम स्रोत क्रम में बाहर रखे जाते हैं। हालांकि, orderसंपत्ति फ्लेक्स कंटेनर में दिखाई देने वाले क्रम को नियंत्रित करती है।

.item ( order: 5; /* default is 0 */ )

फ्लेक्स-बढ़ना

यदि आवश्यक हो तो यह एक फ्लेक्स आइटम के बढ़ने की क्षमता को परिभाषित करता है। यह एक इकाई रहित मान को स्वीकार करता है जो अनुपात के रूप में कार्य करता है। यह तय करता है कि फ्लेक्स कंटेनर के अंदर उपलब्ध जगह की मात्रा कितनी होनी चाहिए।

यदि सभी आइटम flex-grow1 पर सेट हो गए हैं, तो कंटेनर में शेष स्थान सभी बच्चों को समान रूप से वितरित किया जाएगा। यदि बच्चों में से 2 का मूल्य है, तो शेष स्थान दूसरों की तुलना में दोगुना स्थान लेगा (या यह कम से कम करने की कोशिश करेगा)।

.item ( flex-grow: 4; /* default 0 */ )

नकारात्मक संख्याएं अमान्य हैं।

फ्लेक्स-सिकुड़ना

यदि आवश्यक हो तो यह एक फ्लेक्स आइटम को सिकोड़ने की क्षमता को परिभाषित करता है।

.item ( flex-shrink: 3; /* default 1 */ )

नकारात्मक संख्याएं अमान्य हैं।

फ्लेक्स-आधार

यह शेष स्थान को वितरित करने से पहले एक तत्व के डिफ़ॉल्ट आकार को परिभाषित करता है। यह एक लंबाई (जैसे 20%, 5%, आदि) या एक कीवर्ड हो सकता है। autoकीवर्ड का अर्थ है "मेरी चौड़ाई या ऊंचाई होटल में देखो" (जो अस्थायी रूप से द्वारा किया गया था main-sizeकीवर्ड तक हटा दिया गया)। contentकीवर्ड का अर्थ है "आकार यह आइटम की सामग्री के आधार पर" - इस कीवर्ड अच्छी तरह से अभी तक समर्थित नहीं है, तो यह पता है कि अपने भाई परीक्षण करना मुश्किल है और कठिन max-content, min-contentऔर fit-contentकरते हैं।

.item ( flex-basis: | auto; /* default auto */ )

यदि सेट किया गया है 0, तो सामग्री के आसपास का अतिरिक्त स्थान फैक्टर नहीं है। यदि सेट किया जाता है auto, तो अतिरिक्त स्थान को उसके flex-growमूल्य के आधार पर वितरित किया जाता है । इस ग्राफिक को देखें।

फ्लेक्स

यह संयुक्त flex-grow, flex-shrinkऔर flex-basisके लिए आशुलिपि है । दूसरा और तीसरा पैरामीटर ( flex-shrinkऔर flex-basis) वैकल्पिक हैं। डिफ़ॉल्ट है 0 1 auto, लेकिन यदि आप इसे एकल संख्या मान के साथ सेट करते हैं, तो यह पसंद है 1 0।

.item ( flex: none | ( ? || ) )

यह अनुशंसा की जाती है कि आप व्यक्तिगत गुणों को सेट करने के बजाय इस आशुलिपि संपत्ति का उपयोग करें । आशुलिपि अन्य मूल्यों को समझदारी से निर्धारित करता है।

संरेखण-स्व

यह align-itemsव्यक्तिगत फ्लेक्स आइटम के लिए डिफ़ॉल्ट संरेखण (या द्वारा निर्दिष्ट एक ) को ओवरराइड करने की अनुमति देता है ।

कृपया align-itemsउपलब्ध मूल्यों को समझने के लिए स्पष्टीकरण देखें ।

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

ध्यान दें कि float, clearऔर vertical-alignएक फ्लेक्स आइटम पर कोई प्रभाव नहीं है।

उदाहरण

चलो एक बहुत ही सरल उदाहरण के साथ शुरू करते हैं, लगभग एक दैनिक समस्या को हल करते हुए: सही केंद्र। यदि आप flexbox का उपयोग करते हैं तो यह कोई सरल नहीं हो सकता है।

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

यह इस तथ्य पर निर्भर करता है कि autoएक फ्लेक्स कंटेनर में निर्धारित मार्जिन अतिरिक्त स्थान को अवशोषित करता है। तो एक ऊर्ध्वाधर मार्जिन सेट autoकरने से आइटम पूरी तरह से दोनों अक्षों में केंद्रित हो जाएगा।

अब कुछ और गुणों का उपयोग करते हैं। 6 वस्तुओं की एक सूची पर विचार करें, सभी निश्चित आयामों के साथ, लेकिन ऑटो-आकार हो सकते हैं। हम चाहते हैं कि उन्हें समान रूप से क्षैतिज अक्ष पर वितरित किया जाए ताकि जब हम ब्राउज़र का आकार बदलें, तो सब कुछ अच्छी तरह से, और मीडिया प्रश्नों के बिना हो।

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

किया हुआ। बाकी सब बस कुछ स्टाइल चिंता है। नीचे इस उदाहरण की एक कलम दी गई है। कोडपैन पर ज़रूर जाएं और जो कुछ भी होता है उसे देखने के लिए अपनी खिड़कियों का आकार बदलने का प्रयास करें।

चलो कुछ और कोशिश करते हैं। कल्पना करें कि हमारी वेबसाइट के शीर्ष पर हमारे पास एक दायां-संरेखित नेविगेशन तत्व है, लेकिन हम चाहते हैं कि यह मध्यम आकार की स्क्रीन पर केंद्रित हो और छोटे उपकरणों पर एकल-स्तंभित हो। काफी आसान।

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

चलो फ्लेक्स आइटम लचीलेपन के साथ खेलकर कुछ बेहतर प्रयास करें! पूर्ण-चौड़ाई वाले शीर्ष लेख और पाद लेख वाले मोबाइल-पहले 3-कॉलम लेआउट के बारे में क्या। और स्रोत के आदेश से स्वतंत्र।

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

प्रीफ़िक्सिंग फ्लेक्सबॉक्स

Flexbox के लिए संभव है कि अधिकांश ब्राउज़रों का समर्थन करने के लिए कुछ वेंडर उपसर्ग करें। इसमें केवल वेंडर उपसर्ग के साथ प्रीपेडिंग गुण शामिल नहीं हैं, लेकिन वास्तव में पूरी तरह से अलग संपत्ति और मूल्य के नाम हैं। इसका कारण यह है कि फ्लेक्सबॉक्स कल्पना समय के साथ बदल गई है, जिससे एक "पुराना", "ट्विनर" और "नए" संस्करण बन गए हैं।

शायद इसे संभालने का सबसे अच्छा तरीका नए (और अंतिम) सिंटैक्स में लिखना है और अपने सीएसएस को ऑटोप्रेफ़र के माध्यम से चलाना है, जो कि फालबैक को बहुत अच्छी तरह से संभालता है।

वैकल्पिक रूप से, यहाँ @mixinकुछ उपसर्गों के साथ मदद करने के लिए एक Sass है, जो आपको यह भी बताता है कि किस तरह की चीजों को करने की आवश्यकता है:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

अन्य संसाधन

CSS विनिर्देशों में फ्लेक्सबॉक्स
एमडीएन में फ्लेक्सबॉक्स
ओपेरा में फ्लेक्सबॉक्स
Bocoup द्वारा फ्लेक्सबॉक्स में गोता लगाना
CSS-ट्रिक्स पर सर्वश्रेष्ठ ब्राउज़र समर्थन के लिए वाक्यविन्यास मिश्रण
राफेल गेट्टर (FR) द्वारा फ्लेक्सबॉक्स
फ्लेनेट्पर बेनेट फीट द्वारा

कीड़े

फ्लेक्सबॉक्स निश्चित रूप से बग के बिना नहीं है। उनमें से सबसे अच्छा संग्रह मैंने देखा है फिलिप वाल्टन और ग्रेग व्हिटवर्थ के फ्लेक्सबग्स। यह उन सभी को ट्रैक करने के लिए एक ओपन-सोर्स जगह है, इसलिए मुझे लगता है कि यह सिर्फ उसी से लिंक करना सबसे अच्छा है।

ब्राउज़र का समर्थन

Flexbox के "संस्करण" से टूट गया:

(नया) का अर्थ है विनिर्देश से हाल का वाक्य-विन्यास (जैसे display: flex;)
(टर्नर) का अर्थ है 2011 से एक विषम अनौपचारिक वाक्यविन्यास (जैसे display: flexbox;)
(पुराना) का अर्थ है 2009 से पुराना वाक्यविन्यास (जैसे display: box;)

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एज	एंड्रॉयड	आईओएस
20- (पुराना) 21+ (नया)	3.1+ (पुराना) 6.1+ (नया)	2-21 (पुराना) 22+ (नया)	12.1+ (नया)	10 (टर्नर) 11+ (नया)	17+ (नया)	2.1+ (पुराना) 4.4+ (नया)	3.2+ (पुराना) 7.1+ (नया)

ब्लैकबेरी ब्राउज़र 10+ नए सिंटैक्स का समर्थन करता है।