फ्लेक्सबॉक्स तत्वों को समान चौड़ाई नहीं दे रहा है

Question

एक फ्लेक्सबॉक्स नेक्सट का प्रयास करना जिसमें 5 आइटम तक हो और 3 के रूप में कम हो, लेकिन यह सभी तत्वों के बीच चौड़ाई को समान रूप से विभाजित नहीं कर रहा है।

बेला

ट्यूटोरियल मैं इसके बाद मॉडलिंग कर रहा हूं http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

एस.ए.एस.एस.

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

Comments

अपनी मेज को मिन-चौड़ाई दें जैसे और vw इकाइयों के साथ पैडिंग सेट करने में मदद मिल सकती है: jsfiddle.net/2nY9N/2 फ्लेक्स-ग्रो ड्रॉप करें और बस फ्लेक्स करें: 1; यह 2 अन्य गुणों

— जी-साइरिलस

फ्लेक्सबॉक्स का उपयोग करते हुए विभाजन को समान भागों में बल देने

— गजस

Answer 1

एक महत्वपूर्ण बिट है जिसका उल्लेख उस लेख में नहीं किया गया है जिससे आप जुड़े हैं और जो है flex-basis। डिफ़ॉल्ट रूप से flex-basisहै auto।

से कल्पना :

यदि निर्दिष्ट फ्लेक्स-आधार ऑटो है, तो प्रयुक्त फ्लेक्स आधार फ्लेक्स आइटम के मुख्य आकार की संपत्ति का मूल्य है। (यह स्वयं कीवर्ड ऑटो हो सकता है, जो अपनी सामग्री के आधार पर फ्लेक्स आइटम को आकार देता है।)

प्रत्येक फ्लेक्स आइटम में एक है flex-basisजो अपने प्रारंभिक आकार की तरह है। फिर वहाँ से, किसी भी शेष खाली स्थान को आनुपातिक रूप से ( flex-growआइटम के आधार पर ) वितरित किया जाता है । इसके साथ auto, यह आधार सामग्री का आकार (या widthआदि के साथ परिभाषित आकार ) है। परिणामस्वरूप, आपके उदाहरण में समग्र रूप से अधिक पाठ वाले आइटमों को अधिक स्थान दिया जा रहा है।

यदि आप चाहते हैं कि आपके तत्व पूरी तरह से भी हों, तो आप सेट कर सकते हैं flex-basis: 0। यह फ्लेक्स के आधार को 0 पर सेट करेगा और फिर किसी भी शेष स्थान (जो सभी बेस के बाद से 0 होगा) को आनुपातिक रूप से वितरित किया जाएगा flex-grow।

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

कल्पना से यह चित्र बिंदु को दर्शाने का एक बहुत अच्छा काम करता है।

और यहाँ आपके फिडेल के साथ एक काम करने का उदाहरण है ।

Comments

यह खंडहर मेरे लिए सफारी पर लिपटा हुआ है।

— स्नोमैन

इस उत्तर के बारे में भयानक बात यह है कि आप फ्लेक्स-बेस को इस उदाहरण के साथ समझाते हैं कि शाब्दिक रूप से पूरे इंटरनेट पर कहीं और से बेहतर है। मैं आपको मानद प्रोफेसरी देने के बारे में MIT से संपर्क करने जा रहा हूँ।

— ड्यूडेवद

बस ऐसे ही उल्लेख करने के लिए flex: 1;है के संयोजन के लिए आशुलिपि flex-grow: 1, flex-basis: 0।

— वादिम ओविचिनिकोव

अगर कोई गहराई से जानना चाहता है, तो मैं वेब पर इस बेहतरीन लेख पर आया हूँ: css-tricks.com/flex-grow-is-weird

— कुलदीप कुमार

अरे यार, जब मुझे लगा कि मैंने CSS को समझ लिया है, तो मुझे हमेशा सिर पर मारता है।

— इबिक

Answer 2

समान चौड़ाई वाले तत्वों का उपयोग करने के लिए Flex, आपको अपने बच्चे (फ्लेक्स तत्वों) पर सेट करना चाहिए:

flex-basis: 25%;
flex-grow: 0;

यह पंक्ति 25% चौड़ाई में सभी तत्वों को देगा। वे नहीं बढ़ेंगे और एक-एक करके जाएंगे।

Comments

यह बहुत अजीब है क्योंकि यह पूरी तरह से फ्लेक्स के लाभ को कम करता है। यदि youre अपने स्तंभ आकार hardcode करने के लिए चीजों को हल करने के लिए आसान तरीके theres।

— क्लोवर

यह बिल्कुल भी गलत नहीं है .. यदि आप एक ही लंबाई वाले बक्से चाहते हैं और पंक्ति पूरी तरह से घिरी होने पर टूट जाती है .. तो आप इस तरह आसानी से हासिल कर सकते हैं। हो सकता है कि यदि आप एक न्यूनतम चौड़ाई की आवश्यकता करते हैं तो मिन-चौड़ाई भी सेट करें

— इलरियो एंगलर

@ क्लोअर आप कह रहे हैं कि जैसे यह फ्लेक्सबॉक्स का एकमात्र लाभ है ... वे निश्चित रूप से तब भी लाभकारी हो सकते हैं जब आपको समान चौड़ाई की आवश्यकता होती है, जैसे जवाबदेही के लिए। इसके अलावा, यह ऐसा नहीं है कि फ्लेक्सबाक्स आसान नहीं हैं?

— user2999349