display:flexでdivを2列の横並びにする方法

「display:flexを使えば2列の横並びができるらしいが、よくわからない！」

というアナタのために display:flexでdivを2列の横並びにする方法を解説します。

関連記事も参考にしてください。

display:flexの横並び 完成イメージ

以下のような2列の横並べを表現してみましょう。

<style>
.example{
    display: flex;
    background: #cad5f4;
    border: 1px solid #999;
    padding: 10px;
}
.example>div{
    width: 50%;
    background: #FFF;
    border: 1px solid #999;
    padding: 10px;
}
</style>
<div class="example">
    <div>左</div>
    <div>右</div>
</div>

html解説

<div class="example">
    <div>左</div>
    <div>右</div>
</div>

親要素の中に子要素を2つ設置します。この子要素が2列になる部分です。

子要素はdiv以外のタグでもかまいません。親をulに、子をliにするのもありです。

ちなみに3列にしたい場合は3つ並べましょう。

CSS解説

親要素にdisplay:flex

.example{
    display: flex;
}

親要素に「display:flex」を指定しましょう。これを指定した要素の子要素が横並びになります。

子要素にwidth

.example>div{
    width: 50%;
}

子要素にはwidthを指定することをオススメします。必須ではありません。

このとき、それぞれの合計が100％になるように指定しましょう。

例では均等になるようにどちらにも「width:50%」を指定しています。

3列にしたい場合は「width:calc(100% / 3)」と指定すると3分の1になります。

display:flexは合計値が100%を超えても改行されず再計算されます。多少はみ出すような計算になっていても大丈夫です。

flexで横並びさせるメリット

横並びといえばfloatがありますが、flexのほうが優れている理由を解説します。

崩れない

floatは横幅を少し間違えると崩れてしまいます。

flexなら横幅が間違っていても自動計算されたうえで崩れません。

高さがそろう

floatで高さをそろえるにはheightの指定が必要ですが、文字の量などにより高さは変化するため指定は難しいです。

flexなら高いほうに合わせて自動で高さをそろえることができます。

【まとめ】display:flexで2列の横並びする方法

html

親要素内に子要素を2つ

CSS

親要素にdisplay:flex

（子要素にwidth、その他装飾）

display:flexの基礎はこちら↓

以上、display:flexでdivを2列の横並びにする方法でした。