フレックスボックスのアイテムを同じサイズにする方法は？

すべて同じ幅のアイテムがいくつかある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>

最初の項目は2番目の項目よりもかなり大きいです。3アイテム、4アイテム、またはnアイテムがある場合、それらすべてを同じ行に表示し、アイテムごとに等量のスペースを確保します。

何か案は？

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をサポートするために必要です。

flex-basis: 100%これを達成するために追加できます。

更新された例

.header {
  display: flex;
}

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

それだけの価値がある場合はflex: 1、同じ結果を得るために使用することもできます。

の省略形はflex: 1と同じでflex: 1 1 0、次と同等です。

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

width: 0項目の内容によって列が大きくなる場合は、列を等しくするために追加する必要があります。

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

Adam（flex: 1 1 0）が承認した回答は、幅が固定されているか、祖先によって決定されるフレックスボックスコンテナーに対して完全に機能します。子供がコンテナに合うようにしたい状況。

ただし、最大サイズの子に基づいて子のサイズを同じにして、コンテナーを子に合わせたい場合があります。次のいずれかの方法で、フレックスボックスコンテナをその子に適合させることができます。

• 設定position: absoluteしていない設定widthやright、または
• ラッパーの中に入れます display: inline-block

このようなフレックスボックスコンテナの場合、受け入れられた回答は機能しません。子のサイズは等しくありません。Chrome、Firefox、Safariで同じように動作するため、これはflexboxの制限であると思います。

解決策は、フレックスボックスの代わりにグリッドを使用することです。

デモ：https : //codepen.io/brettdonald/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}

私はフレックスの専門家ではありませんが、私が扱っていた2つの項目の基準を50％に設定することでそこに到達しました。1に成長し、0に縮小します。

インラインスタイル： flex: '1 0 50%',