【CSS】flexで横並びの子要素を均等幅にする方法

display:flexを指定した子要素は横並びになります。

ただしその幅はwidthを指定しない限り、内容量に応じて伸び縮みします。

ここでは子要素の数に関わらずdisplay:flexで横並びの子要素を均等幅にする方法を解説します。

【方法1】子にwidth:100%

display:flexを指定した子要素にwidth:100%を指定すると均等幅になります。

<style>
.example{
    display: flex;
    border: 1px solid #333;
    padding: 5px;
    background: #dff0ff;
}
.example>div{
    /*コレ*/width: 100%;
    border: 1px solid #333;
    padding: 5px;
    background: #ffffff;
    margin: 5px;
}
</style>
<div class="example">
    <div>テキスト</div>
    <div>テキストテキスト</div>
    <div>テキストテキストテキスト</div>
    <div>テキストテキストテキストテキスト</div>
</div>

「flex-wrap: wrap」を指定しない限り、display:flexの子要素は改行しません。

子要素の合計widthが親の幅より大きいとき、子要素の各widthの値に比率で再計算されます。

width:100%を指定することで「子要素の合計widthが親の幅より大きい」という条件を満たし、かつ、子要素の比率を統一させ均等幅にできるというわけです。

【方法2】子にflex:1

display:flexを指定した子要素にflex:1を指定すると均等幅になります。

<style>
.example2{
    display: flex;
    border: 1px solid #333;
    padding: 5px;
    background: #dff0ff;
}
.example2>div{
    /*コレ*/flex: 1;
    border: 1px solid #333;
    padding: 5px;
    background: #ffffff;
    margin: 5px;
}
</style>
<div class="example2">
    <div>テキスト</div>
    <div>テキストテキスト</div>
    <div>テキストテキストテキスト</div>
    <div>テキストテキストテキストテキスト</div>
</div>

flexは「display:flex」の子要素に指定し、残りの幅に対して幅（または高さ）をどのようにするか指定するCSSです。

正直flexについて理解するのは難しく、また使う機会もコレ以外ないので「子要素にflex:1を指定すると均等幅になる」とだけ覚えてしまいましょう。

【まとめ】flexで子要素を均等幅にする方法

【方法1】子にwidth:100%

【方法2】子にflex:1

以上、子要素の数に関わらずdisplay:flexで横並びの子要素を均等幅にする方法でした。