फ्लेक्सबॉक्स मॉड्यूल के लिए कोई अद्यतित ट्यूटोरियल?

Question

मुझे पता है कि Flexible Box Layout module spec बदल गया है, और कुछ ब्राउज़र अब इसके एक से अधिक संस्करण (विभिन्न वाक्यविन्यासों का उपयोग करके) लागू करते हैं। मैं जानकारी खोज रहा हूं, लेकिन मुझे केवल चेतावनियों के साथ ट्यूटोरियल मिल सकते हैं कि वे अब पुराने हैं।

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

क्या किसी को अद्यतित ट्यूटोरियल पता है?

Answer 1

यहां सबसे अच्छा flexbox tutorial है जो मैंने पाया है, यह बहुत अच्छी तरह से समझाया गया है या यदि आपको गहन स्पष्टीकरण की आवश्यकता है तो w3c draft देखें।

और फ्लेक्सबॉक्स मॉडल की जांच और बेहतर समझ के लिए, यह flexbox playground देखें।

Answer 2

फ्लेक्सबॉक्स मॉड्यूल अभी तक पुराना नहीं है। नए मॉडल के कार्यान्वयन में समय लगेगा, शायद लागू करने के लिए एक वर्ष।

डब्ल्यू 3 सी में मानकों के लिए प्रलेखन और उन चीजों के नोट्स भी होते हैं जिन्हें कार्यान्वित नहीं किया जा सकता है या नहीं।

यहां वर्तमान Flexbox Layout Module है।

यहां नए spec Flexbox Layout Module 2012 के संपादक का मसौदा है।

Answer 3

html5please.com की सौजन्य, ऐसा लगता है कि फ्लेक्सबॉक्स स्पेक को स्थिर माना जाता है और Opera और Mozilla पर ट्यूटोरियल हैं।

नोट मुझे यकीन नहीं है कि html5please अभी भी क्यों बचने की सिफारिश करता है। इसका पाठ विपरीत सुझाव देता है।

Answer 4

क्योंकि अतीत में कार्यान्वयन बदल गया है, वहां फ्लेक्सबॉक्स के 2 प्रमुख कार्यान्वयन हैं। This page पुराने और नए कार्यान्वयन के बारे में कुछ पृष्ठभूमि जानकारी प्रदान करता है।

मुझे फ्लेक्सबॉक्स here के कार्यान्वयन की वर्तमान स्थिति के लिए एक अच्छा ट्यूटोरियल मिला। एक पृष्ठ (demo on Codepen here) के एचटीएमएल-संरचना के

उदाहरण कोड:

<div class="page-wrap"> 

    <section class="main-content" role="main"> 
    Main content: first in source order 
    </section> 

    <nav class="main-nav" role="navigation"> 
    Links 
    </nav> 

    <aside class="main-sidebar" role="complementary"> 
    Sidebar 
    </aside> 

</div> 

main-nav दो बार के रूप साइडबार के रूप में बड़ी के साथ 3 में page-wrap टुकड़े को विभाजित करने के लिए, हम flexbox इस्तेमाल कर सकते हैं। एक और फायदा यह है कि main-content डीओएम में तत्व की स्थिति main-nav से पहले है लेकिन फ्लेक्सबॉक्स के साथ हम सामग्री से पहले इसे प्रस्तुत कर सकते हैं। यह स्क्रीनreaders के लिए उपयोगी है इसलिए सामग्री पहले पढ़ी जाती है।

हमें page-wrap एक फ्लेक्सबॉक्स संदर्भ बनाने की आवश्यकता है।

.page-wrap { 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
} 

गुणों का क्रम महत्वपूर्ण है: इस तरह सभी बच्चों flexbox आइटम बन जाते हैं। चूंकि कुछ ब्राउज़र दोनों कार्यान्वयन का समर्थन करते हैं, इसलिए हमें पुरानी गुणों के नीचे नवीनतम गुणों को निर्दिष्ट करने की आवश्यकता होती है। ऐसा इसलिए है क्योंकि display -property prefixed नहीं है।

आइटम की चौड़ाई जोड़ने के लिए:

.main-content { 
    width: 60%; 
} 
.main-nav, 
.main-sidebar { 
    -webkit-box-flex: 1;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    -moz-box-flex: 1;   /* OLD - Firefox 19- */ 
    width: 20%;    /* For old syntax, otherwise collapses. */ 
    -webkit-flex: 1;   /* Chrome */ 
    -ms-flex: 1;    /* IE 10 */ 
    flex: 1;     /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
} 

क्योंकि अब main-navmain-content

.main-content { 
    -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ 
    -moz-box-ordinal-group: 2;  /* OLD - Firefox 19- */ 
    -ms-flex-order: 2;    /* TWEENER - IE 10 */ 
    -webkit-order: 2;    /* NEW - Chrome */ 
    order: 2;      /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
} 
.main-nav { 
    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1;  
    -ms-flex-order: 1;  
    -webkit-order: 1; 
    order: 1; 
} 
.main-sidebar { 
    -webkit-box-ordinal-group: 3; 
    -moz-box-ordinal-group: 3;  
    -ms-flex-order: 3;  
    -webkit-order: 3; 
    order: 3; 
}