ホーム(記事一覧)へ

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

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

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

display:flexの基礎はこちら↓

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

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

html

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

CSS

.example{
    display: flex;
}
.example>div{
    width: 50%;
}
.example,.example>div{
    border: 1px solid #999;
    padding: 10px;
}

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%を超えても改行されず再計算されます。多少はみ出すような計算になっていても大丈夫です。

その他装飾

.example,.example>div{
    border: 1px solid #999;
    padding: 10px;
}

その他、borderやpaddingを指定して調整しましょう。

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

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

崩れない

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

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

高さがそろう

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

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

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

html

親要素内に子要素を2つ

CSS

親要素にdisplay:flex

(子要素にwidth、その他装飾)

display:flexの基礎はこちら↓

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

関連記事