So bringen Sie Flexbox-Elemente auf die gleiche Größe ⇐ CSS

[Anonymous]

Ich möchte Flexbox verwenden, das eine Reihe von Elementen enthält, die alle die gleiche Breite haben. Mir ist aufgefallen, dass Flexbox den Raum gleichmäßig verteilt und nicht den Raum selbst.
Zum Beispiel:

Code: Select all

.header {
display: flex;
}

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

Code: Select all

asdfasdfasdfasdfasdfasdf
z

Das erste Element ist viel größer als das zweite. Wenn ich drei Elemente, vier Elemente oder n Elemente habe, möchte ich, dass sie alle in derselben Zeile mit gleich viel Platz pro Element angezeigt werden.
Irgendwelche Ideen?
http://codepen.io/anon/pen/gbJBqM