flexboxで要素を均等幅で横並びに配置する

flexboxは要素を横並びにするのに便利なプロパティですが、デフォルトでは要素の各幅が均等にならない場合があります。

その場合のプロパティの指定方法をよく忘れのでメモしておきます。

子要素にflex:1を指定する

見出しのまんま、flex:1と指定すればOKです。

例えば、下記のようなコードがあるとした場合、

<div class="flex-box">
  <div class="flex-item">短いテキスト</div>
  <div class="flex-item">少し長めのテキスト</div>
  <div class="flex-item">と〜〜〜ても長〜いテキスト</div>
</div>

単純に次のようにCSSを指定すると幅がバラバラになります。

.flex-box {
    display:flex;
}

そこで各要素のflex:1を指定します。

.flex-box {
    display:flex;
}
.flex-item {
    flex:1
}

これで均等になりましたね。