マンガでわかるホームページ作成

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を指定して調整しましょう。

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

html

親要素内に子要素を2つ

CSS

親要素にdisplay:flex

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

display:flexの基礎はこちら↓

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

関連記事