फ्लेक्सबॉक्स आइटम को समान आकार कैसे बनाएं?

Question

मैं फ्लेक्सबॉक्स का उपयोग करना चाहता हूं जिसमें कुछ संख्याएं हैं जो सभी समान चौड़ाई हैं। मैंने देखा है कि फ्लेक्सबॉक्स स्पेस के बजाए समान रूप से अंतरिक्ष को समान रूप से वितरित करता है।

उदाहरण के लिए:

.header { 
 
    display: flex; 
 
} 
 

 
.item { 
 
    flex-grow: 1; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
}

<div class="header"> 
 
    <div class="item">asdfasdfasdfasdfasdfasdf</div> 
 
    <div class="item">z</div> 
 
</div>

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

कोई विचार?

http://codepen.io/anon/pen/gbJBqM

Answer 1

उन्हें सेट करें कि उनके flex-basis0 है (ताकि सभी तत्वों को एक ही प्रारंभिक बिंदु है), और उन्हें विकसित करने के लिए अनुमति देते हैं:

flex: 1 1 0

Answer 2

आप flex-basis: 100% जोड़ सकता है इस लक्ष्य को हासिल करने के लिए ।

Updated Example

.header { 
    display: flex; 
} 

.item { 
    flex-basis: 100% 
    text-align: center; 
    border: 1px solid black; 
} 

के लिए क्या इसके लायक है, तो आप भी एक ही परिणाम के लिए flex: 1 का उपयोग के साथ-साथ हो सकता है।

flex: 1 की आशुलिपि जो के बराबर है flex: 1 1 0 रूप में एक ही है:

.item { 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: 0; 
    text-align: center; 
    border: 1px solid black; 
} 

Answer 3

जोड़ा जा रहा है चौड़ाई: 0 मुझे समस्या

.item { 
     flex-grow: 1 1 0; 
     width: 0; 
    } 

यहाँ

का समाधान में मदद की लिंक, जिनकी सहायता से हल है मेरी समस्या: Always equal flexbox columns