【CSS】divをflexで2段以上の横並びをする方法

「wordpressで記事一覧を出力して、それを複数行の横並びにしたい！」

divをflexで2段以上の横並びをする方法を解説します。

【結論】display:flexとflex-wrap:wrap

複数行の横並びをするにはdisplay:flexとflex-wrap:wrapがカギです。

<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/flex-wrap: wrap;
}
.example>div{
    /*コレ*/width: 50%;
    /*コレ*/box-sizing: border-box;
    border: 1px solid #999;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example">
    <div>1<br>1</div>
    <div>2</div>
    <div>3</div>
    <div>4<br>4<br>4</div>
    <div>5<br>5</div>
    <div>6<br>6<br>6</div>
</div>

「display:flex」は子要素の位置調整をするCSSです。これを使うとカンタンに子要素を横並べできます。

「flex-wrap:wrap」はdisplay:flexの子要素の横並べを折り返すようにするCSSです。flex-wrapの初期値はnowrap（折り返さない）ですのでwrapを指定しないと折り返されません。

横並びになる子要素には「width」を指定しましょう。

2列にしたいなら50％、3列ならcalc(100% / 3)を指定するといいでしょう。

「box-sizing: border-box」を指定するとborderとpaddingがwidthに含まれるため計算がラクになります。ただしmarginは含まれないのでmarginを指定する際はmarginを除くwidthを指定しましょう。

display:flexを使って複数行の横並びをするメリット

複数行の横並びをする方法はいくつかありますが、あえてdisplay:flexを使う方法だけを紹介しました。その理由を解説します。

行ごとに高さがそろう

上記の例のように左右の内容量が異なり高さが違う場合でも1行ごとの高さをそろえることができます。

これにより違和感のないキレイなデザインにできます。

floatしかなかった頃はheightを固定するかjavascriptで一番大きいheightに全部そろえるということしかできませんでした。

display:flexを使ってカンタンに実現しましょう。

要素すべて兄弟要素にできる

上記のように左右の高さをそろえるだけならtableでも実現可能です。

しかしtableの場合は行ごとに「tr」でしきる必要があります。

静的htmlならまだいいですが、wordpressなどで記事一覧を取得するような場合、記事2つごとにtrを追加する、というような複雑な動きが必要になってしまいます。

display:flexなら要素すべて兄弟要素にできるため記事一覧の出力でも単純にできます。

【まとめ】複数行の横並び

• 親要素にdisplay:flexとflex-wrap:wrap
• 子要素にwidthとbox-sizing: border-box

以上、divをflexで2段以上の横並びをする方法でした。