विचार करें flex-direction
आपके प्रश्न को पढ़ते समय पहली बात जो दिमाग में आती है, वह flex-basisयह है कि हमेशा लागू नहीं होती है width।
कब flex-directionहै row, flex-basisचौड़ाई को नियंत्रित करता है।
लेकिन जब flex-directionहै column, flex-basisऊंचाई को नियंत्रित करता है।
मुख्य अंतर
यहाँ के बीच कुछ महत्वपूर्ण अंतर हैं flex-basisऔर width/ height:
flex-basisकेवल फ्लेक्स आइटम पर लागू होता है। फ्लेक्स कंटेनर (जो फ्लेक्स आइटम भी नहीं हैं) अनदेखी करेंगे flex-basisलेकिन उपयोग कर सकते हैं widthऔर height।
flex-basisकेवल मुख्य अक्ष पर काम करता है। उदाहरण के लिए, यदि आप कर रहे हैं flex-direction: column, widthसंपत्ति क्षैतिज फ्लेक्स आइटम आकार के लिए जरूरत होगी।
flex-basisपूरी तरह से तैनात फ्लेक्स आइटम पर कोई प्रभाव नहीं है। widthऔर heightगुण आवश्यक होंगे। फ्लेक्स लेआउट में पूर्णतया स्थित फ्लेक्स आइटम शामिल नहीं होते हैं ।
flexसंपत्ति का उपयोग करके , तीन गुणों - flex-grow, flex-shrinkऔर flex-basis- को एक घोषणा में बड़े करीने से जोड़ा जा सकता है। का उपयोग करते हुए width, एक ही नियम कोड की कई लाइनों की आवश्यकता होगी।
ब्राउज़र व्यवहार
जब तक उनका प्रतिपादन किया जाता है , तब तक, और , जब तक या के बीच कोई अंतर नहीं होना चाहिए ।flex-basiswidthflex-basisautocontent
कल्पना से:
7.2.3। flex-basisसंपत्ति
के अलावा autoऔर सभी मूल्यों के लिए content, क्षैतिज लेखन मोड में flex-basisउसी तरह हल किया जाता widthहै।
लेकिन के प्रभाव autoया contentकम से कम या बिल्कुल कुछ भी नहीं हो सकता है। कल्पना से अधिक:
auto
जब किसी फ्लेक्स आइटम पर निर्दिष्ट किया जाता है, तो autoकीवर्ड उपयोग किए जाने वाले मुख्य आकार की संपत्ति का मान प्राप्त करता है flex-basis। यदि वह मान स्वयं है auto, तो प्रयुक्त मूल्य है content।
content
फ्लेक्स आइटम की सामग्री के आधार पर, स्वचालित आकार का संकेत देता है।
नोट: यह मान फ्लेक्सिबल बॉक्स लेआउट के प्रारंभिक रिलीज में मौजूद नहीं था, और इस प्रकार कुछ पुराने कार्यान्वयन इसका समर्थन नहीं करेंगे। समतुल्य प्रभाव autoमुख्य आकार ( widthया height) के साथ एक साथ उपयोग करके प्राप्त किया जा सकता है auto।
तो, युक्ति के अनुसार, flex-basisऔर widthपहचान के अनुसार हल करें, जब तक flex-basisकि autoया नहीं content। ऐसे मामलों में, flex-basisसामग्री की चौड़ाई का उपयोग कर सकते हैं (जो, संभवतः, widthसंपत्ति का उपयोग करेगा, साथ ही)।
flex-shrinkफ़ैक्टर
फ्लेक्स कंटेनर की शुरुआती सेटिंग्स को याद रखना महत्वपूर्ण है। इनमें से कुछ सेटिंग्स में शामिल हैं:
flex-direction: row - फ्लेक्स आइटम क्षैतिज रूप से संरेखित होंगेjustify-content: flex-start - फ्लेक्स आइटम मुख्य अक्ष पर लाइन की शुरुआत में स्टैक करेंगेalign-items: stretch - फ्लेक्स आइटम कंटेनर के क्रॉस-आकार को कवर करने के लिए विस्तारित होंगेflex-wrap: nowrap - फ्लेक्स आइटम को एक ही लाइन में रहने के लिए मजबूर किया जाता हैflex-shrink: 1 - एक फ्लेक्स आइटम को सिकुड़ने की अनुमति है
अंतिम सेटिंग पर ध्यान दें।
क्योंकि फ्लेक्स आइटम को डिफ़ॉल्ट रूप से सिकुड़ने की अनुमति है (जो उन्हें कंटेनर को बहने से रोकता है), निर्दिष्ट flex-basis/ width/ heightओवरराइड हो सकता है।
उदाहरण के लिए, flex-basis: 100pxया width: 100px, के साथ युग्मित flex-shrink: 1, जरूरी नहीं कि 100px होगा।
निर्दिष्ट चौड़ाई को रेंडर करने के लिए - और इसे ठीक रखें - आपको सिकुड़ने को अक्षम करना होगा:
div {
width: 100px;
flex-shrink: 0;
}
या
div {
flex-basis: 100px;
flex-shrink: 0;
}
या, युक्ति द्वारा अनुशंसित:
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
7.2। लचीलापन के घटक
लेखकों को flexशॉर्टहैंड का उपयोग करके लचीलेपन को नियंत्रित करने के लिए प्रोत्साहित किया जाता है, न कि सीधे अपने लंबे समय के गुणों के साथ, क्योंकि शॉर्टहैंड किसी भी अनिर्दिष्ट घटक को सामान्य उपयोगों को समायोजित करने के लिए सही ढंग से रीसेट करता है ।
ब्राउज़र कीड़े
कुछ ब्राउज़रों को नेस्टेड फ्लेक्स कंटेनरों में फ्लेक्स आइटम को आकार देने में परेशानी होती है।
flex-basisएक नेस्टेड फ्लेक्स कंटेनर में नजरअंदाज कर दिया। widthकाम करता है।
उपयोग करते समय flex-basis, कंटेनर अपने बच्चों के आकार की उपेक्षा करता है, और बच्चे कंटेनर को ओवरफ्लो करते हैं। लेकिन widthसंपत्ति के साथ , कंटेनर अपने बच्चों के आकार का सम्मान करता है और तदनुसार फैलता है।
संदर्भ:
उदाहरण:
फ्लेक्स आइटम का उपयोग करना flex-basisऔर कंटेनर को white-space: nowrapओवरफ्लो करना inline-flex। widthकाम करता है।
ऐसा लगता है कि एक फ्लेक्स कंटेनर को एक बच्चे पर inline-flexपहचानने के लिए सेट नहीं किया जाता है, flex-basisजब एक भाई के साथ प्रतिपादन किया जाता है white-space: nowrap(हालांकि यह अपरिभाषित चौड़ाई के साथ एक आइटम हो सकता है)। कंटेनर में वस्तुओं को समायोजित करने के लिए विस्तार नहीं होता है।
लेकिन जब widthइसके बजाय संपत्ति का उपयोग किया जाता है flex-basis, तो कंटेनर अपने बच्चों के आकार का सम्मान करता है और तदनुसार फैलता है। यह IE11 और एज में कोई समस्या नहीं है।
संदर्भ:
उदाहरण:
flex-basis(और flex-grow) तालिका तत्व पर काम नहीं कर रहा है
संदर्भ:
flex-basisक्रोम और फ़ायरफ़ॉक्स में विफल रहता है जब दादा-दादी कंटेनर एक सिकोड़ने योग्य फिट तत्व है। एज में सेट-अप ठीक काम करता है।
जैसे ऊपर दिए गए लिंक में प्रस्तुत उदाहरण में, शामिल position: absolute, का उपयोग floatऔर inline-block, एक ही त्रुटिपूर्ण आउटपुट ( jsfiddle डेमो ) भी प्रस्तुत करेगा ।
IE 10 और 11 को प्रभावित करने वाले कीड़े: