How to make flexbox items the same size?

Question

I want to use flexbox that has some number of items that are all the same width. I've noticed that flexbox distributes the space around evenly, rather than the space itself.

For example:

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

The first item is a lot bigger than the second. If I have 3 items, 4 items, or n items, I want them all to appear on the same line with an equal amount of space per item.

Any ideas?

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

Answer 1

Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:

flex: 1 1 0px 

Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by @fabb;