Jak zrobić elementy flexbox tego samego rozmiaru?

Question

Chcę używać Flexbox, który ma pewną liczbę elementów, które mają tę samą szerokość. Zauważyłem, że Flexbox rozprowadza przestrzeń równomiernie, a nie samą przestrzeń.

Na przykład:

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

Pierwsza pozycja jest dużo większy niż sekundę. Jeśli mam 3 elementy, 4 elementy lub n elementów, chcę, aby wszystkie pojawiały się w tej samej linii z równą ilością miejsca na element.

Wszelkie pomysły?

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

Answer 1

Ustaw je tak, że ich flex-basis jest 0 (a więc wszystkie elementy mają ten sam punkt początkowy) i pozwolić im się rozwijać:

flex: 1 1 0

Answer 2

Można dodać flex-basis: 100% do osiągnięcia tego celu .

Updated Example

.header { 
    display: flex; 
} 

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

Na co warto, można również użyć flex: 1 do tych samych wyników, jak również.

skrótowym z flex: 1 jest taka sama jak flex: 1 1 0, co jest równoważne:

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

Answer 3

Dodawanie szerokości: 0 pomógł mi rozwiązać problem

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

tu jest link, który pomoże mi rozwiązać mój problem: Always equal flexbox columns