दिलचस्प पोस्ट
आंतरिक टेक्स्ट बनाम इनरियल एचटीएमएल बनाम लेबल बनाम टेक्स्ट बनाम टेक्स्ट कॉन्टैक्ट vs बाहरी टेक्स्ट Git में चेक-अप उपनिर्देशिकाएं? अपरिभाषित व्यवहार और अनुक्रम अंक ब्राउजर इवेंट जब डाउनलोड की गई फ़ाइल को डिस्क पर सहेजा जाता है ie8 var w = window.open () – "संदेश: अमान्य तर्क।" Outlook में डिफ़ॉल्ट हस्ताक्षर कैसे जोड़ें ऑन-क्लिक आइटम के साथ एंड्रॉइड सूची दृश्य किसी भी बाहरी उपकरण का उपयोग किए बिना मैं बैच फ़ाइल के साथ एक फाइल कैसे डाउनलोड कर सकता हूं? पाठ क्षेत्र की चौड़ाई के अनुसार टेक्स्ट आकार की गणना करें कैसे पता कैसे एक ऑब्जेक्ट पायथन में एक विशेषता है पुनः साइन इन आईपीए (आईफोन) सॉकेट प्रोग्रामिंग के लिए INADDR_ANY को समझना एक्लिप्स लॉन्च करते समय "एप्लिकेशन सर्विस प्राप्त करने में असमर्थ" त्रुटि डिफ़ॉल्ट छवि गैलरी से चयनित चित्र की सही ओरिएंटेशन कैसे प्राप्त करें EntityType में कोई प्रमुख परिभाषित त्रुटि नहीं है

अपने मूल आकार के आधार पर फ्लेक्स बढ़ाएं आइटम बढ़ाएं

मेरे पास एक पंक्ति में 3 बटन हैं जो सभी चौड़ाई में भिन्न होते हैं I मैं चाहता हूं कि पंक्ति की शेष चौड़ाई को भरने के लिए उन्हें सभी लाभ मिलते रहें, इसीलिए व्यापक अभी भी अन्य लोगों की तुलना में व्यापक होगा।

आप नीचे देख सकते हैं कि मैंने फ्लेक्स के साथ क्या करने की कोशिश की है, जिसके परिणामस्वरूप सभी बटन एक ही चौड़ाई हैं। मुझे पता है कि flex-grow को प्रत्येक आइटम को आनुपातिक रूप से विकसित करने के लिए इस्तेमाल किया जा सकता है, लेकिन मैं यह नहीं बता सकता कि उनके मूल आकार के संबंध में उन्हें कैसे बढ़ाना है।

आप दूसरी पंक्ति में देख सकते हैं कि नीला आइटम दूसरे दो से बड़ा है। मैं सिर्फ तीनों को अपने वर्तमान आकार से विस्तारित करने के लिए समान रूप से पंक्ति भरने चाहता हूं

धन्यवाद

 .row-flex { width: 100%; display: flex; flex-direction: row; } .button { flex: 1; display: inline-block; padding: 10px; color: #fff; text-align: center; } .button--1 { background: red } .button--2 { background: green; } .button--3 { background: blue; } 
 <div class="row-flex"> <a href="#" class="button button--1">Single</a> <a href="#" class="button button--2">Larger title</a> <a href="#" class="button button--3">Another really large title</a> </div> <br/> <div class="row"> <a href="#" class="button button--1">Single</a> <a href="#" class="button button--2">Larger title</a> <a href="#" class="button button--3">Another really large title</a> </div> 

वेब के समाधान से एकत्रित समाधान "अपने मूल आकार के आधार पर फ्लेक्स बढ़ाएं आइटम बढ़ाएं"

संक्षिप्त जवाब

आपको बस flex: 1 से स्विच करना है flex: 1 से flex: auto


व्याख्या

आंकड़ों के दो महत्वपूर्ण टुकड़ों में flex-grow संपत्ति कारक:

  1. पंक्ति / कॉलम में रिक्त स्थान जहां इसका उपयोग किया जा रहा है
  2. flex-basis संपत्ति का मूल्य

फ्री स्पेस का वितरण

flex-grow प्रॉपर्टी एक ही लाइन में फ्लेक्स आइटम के बीच कंटेनर में खाली स्थान वितरित करती है।

अगर कोई खाली स्थान नहीं है, तो flex-grow का कोई प्रभाव नहीं पड़ता है।

यदि नकारात्मक मुक्त स्थान है (यानी, फ्लेक्स आइटम की कुल लंबाई कंटेनर की लंबाई से अधिक है), तो flex-grow का कोई प्रभाव नहीं पड़ता है और flex-shrink प्ले में आता है।


flex-basis कारक

जब flex-basis 0 , flex-grow बढ़ाता है फ्लेक्स मदों में सामग्री की चौड़ाई / ऊंचाई को अनदेखा करता है और सभी स्थान को रिक्त स्थान के रूप में मानता है।

यह पूर्ण आकार देने वाला है लाइन पर सभी स्थान वितरित किया जाता है।

जब flex-basis auto , फ्लेक्स मदों में सामग्री के आकार में फ्लेक्स flex-grow पहले कारक flex-grow । यह तब वस्तुओं के बीच खाली स्थान वितरित करता है, जिसके परिणामस्वरूप प्रत्येक आइटम उनकी सामग्री की लंबाई के आधार पर आनुपातिक रूप से बढ़ रहा है।

यह रिश्तेदार आकार का है केवल लाइन पर अतिरिक्त स्थान वितरित किया जाता है।

यह नमूना से एक उदाहरण है:

यहां छवि विवरण दर्ज करें


उदाहरण:

  • flex: 1 (पूर्ण आकार वाला)

    इस लघुकथा का नियम नीचे टूट जाता है: flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

    सभी फ्लेक्स मदों पर लागू होता है, इससे सामग्री की परवाह किए बिना, उन्हें समान लंबाई मिल जाएगी।

  • flex-grow: 1 (सापेक्ष आकार)

    यह नियम स्वयं ही सामग्री आकार और उपलब्ध स्थान दोनों में कारक होगा, क्योंकि flex-basis लिए डिफ़ॉल्ट मान auto

  • flex: auto (सापेक्ष आकार)

    दोनों सामग्री आकार और उपलब्ध स्थान में यह लघुकथा कारक है क्योंकि यह नीचे टूट जाता है:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto

यहां अधिक विविधताएं: 7.1.1 flex की बुनियादी flex

अतिरिक्त खोजशब्द (खोज के लिए): फ्लेक्स-बेस के बीच अंतर: ऑटो बनाम फ्लेक्स आधार: 0

सुनिश्चित नहीं हैं कि यह पूरी तरह से आपके बाद क्या है, लेकिन अगर आप flex-grow:1 flex:1; बजाय flex:1; , मुझे लगता है कि यह आपके आवश्यक परिणाम है:

 .row-flex { width: 100%; display: inline-flex; flex-direction: row; } .button { flex-grow: 1; padding: 10px; color: #fff; text-align: center; } .button--1 { background: red } .button--2 { background: green; } .button--3 { background: blue; } 
 <div class="row-flex"> <a href="#" class="button button--1">Single</a> <a href="#" class="button button--2">Larger title</a> <a href="#" class="button button--3">Another really large title</a> </div> 

flex संपत्ति का उपयोग करके आप अनुपात सेट कर सकते हैं:

 .button { display: inline-block; padding: 10px; color: #fff; text-align: center; } .row { display: flex; } .button--1 { background: red; flex: 1 1 auto; } .button--2 { background: green; flex: 2 1 auto; } .button--3 { background: blue; flex: 3 1 auto; } 
 <br/> <div class="row"> <a href="#" class="button button--1">Single</a> <a href="#" class="button button--2">Larger title</a> <a href="#" class="button button--3">Another really large title</a> </div>