Esnek kutu öğeleri aynı boyutta nasıl oluşturulur?

Question

Aynı genişlikte birkaç öğe içeren flexbox kullanmak istiyorum. Bu esnek kutunun, uzayı uzaydan ziyade eşit olarak dağıttığını fark ettim. Örneğin

:

.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>

ilk öğenin ikinciden çok daha büyük olduğunu. 3 öğe, 4 öğe veya n öğem varsa bunların hepsinin, öğe başına eşit miktarda alanla aynı satırda görünmesini istiyorum.

Herhangi bir fikrin var mı?

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

Answer 1

onların flex-basis (böylece bütün elemanları aynı başlangıç ​​noktası var) 0 böylece onları ayarlayın ve büyümelerini sağlar: bunu başarmak için

flex: 1 1 0

Answer 2

Sen flex-basis: 100% ekleyebilir .

.header { 
    display: flex; 
} 

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

Ne olursa olsun, aynı zamanda hem aynı sonuçlar için flex: 1 kullanabilirsiniz İçin

Updated Example

.

flex: 1 ait stenografi eşdeğer olan flex: 1 1 0 aynıdır:

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

Answer 3

ekleme genişliği: 0 beni sorunu burada

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

çözmek yardımcı beni çözmeye yardımcı link Benim sorunum: Always equal flexbox columns