我想使用具有一些相同宽度的项目的flexbox。我注意到flexbox将空间均匀分布，而不是空间本身。

例如：

.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个项目或n个项目，则我希望它们全部显示在同一行上，每个项目具有相等的空间。

有任何想法吗？

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