[解決済み】フレックスボックスのアイテムを同じサイズにする方法は？

質問

同じ幅のアイテムが何個かあるフレックスボックスを使いたいのですが、どうすればいいですか？フレックスボックスは、スペースそのものよりも、周りのスペースを均等に分散させることに気づきました。

例えば

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

1番目の項目は2番目の項目よりかなり大きいですね。3項目、4項目、n項目の場合、すべて同じ行に表示させ、1項目あたりのスペースを等しくしたいのです。

何かアイデアはありますか？

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

解決方法は？

になるように設定します。 flex-basis は 0 (つまり、すべての要素が同じ始点を持っている)、そして、それらを成長させる。

flex: 1 1 0px

あなたのIDEやリンターは、以下のように言及するかもしれません。 the unit of measure 'px' is redundant . もし、それを省いてしまうと（例えば flex: 1 1 0 ) 、IEはこれを正しくレンダリングしません。そのため px は、@fabb さんのコメントにもあるように、Internet Explorer に対応する必要があります。