縦に並ぶリストを2列にするCSS｜初心者向けFlexboxの使い方

縦に並ぶだけのリストを、PC表示では2列にするCSSを解説します。

リストの件数は減らしたくないけれど、縦に長くなりすぎるのは避けたい。そんなときは、Flexboxを使った2列レイアウトが役立ちます。

放置しがちなリスト表示を整える

ブログの空きスペースに表示している「リスト状の新着記事」を例に、2列表示へ整えます。

内部リンクを意識すると、「あれも読んでほしい」「これも読んでほしい」と、表示する件数が少し増えることがあります。

ただ、縦に長いリストのままだと、ページ内のスペースを大きく使ってしまいます。そこで、PC表示では2列にして、見た目を整理します。

今回のサブテーマは、リストの整理・整頓です。

リストを2列にするCSSの基本セット

まずは見本となるリストを用意します。

• 記事タイトル10文字程度
• 20文字程度の少し長めのタイトルです
• 30文字。グリッドを意識した美しい設計図の書き方について
• 余白とフォントサイズが織りなす比率の黄金律と設計思想について
• 余白と計算式が織りなす技術備忘録の新しい形
• 最後の6件目

上記リストのHTMLは次の通りです。

<ul class="mikoto-flex-list">
  <li><a href="#">記事タイトル10文字程度</a></li>
  <li><a href="#">20文字程度の少し長めのタイトルです</a></li>
  <li><a href="#">30文字。グリッドを意識した美しい設計図の書き方について</a></li>
  <li><a href="#">余白とフォントサイズが織りなす比率の黄金律と設計思想について</a></li>
  <li><a href="#">余白と計算式が織りなす技術備忘録の新しい形</a></li>
  <li><a href="#">最後の6件目</a></li>
</ul>

display: flex / flex-wrap: wrap / justify-content: space-between

まずは、親要素である .mikoto-flex-list に指定するCSSから見ていきます。

/* 親要素 */
.mikoto-flex-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

親要素側で見る主な指定は、この3つです。

display: flex

まず display: flex は、親要素に指定します。
通常、HTMLの要素は上から下へ積み重なりますが、display: flex を指定すると、子要素の並びを制御しやすくなります。

flex-wrap: wrap

display: flex をただ使うだけでは、対象リストは横並びになるだけです。子要素が親要素の幅に収まらない場合、サイドバーなどの外側にはみ出して見えることがあります。
そこで flex-wrap: wrap を指定すると、横幅に収まらない要素が下の行に折り返されます。
2列表示にしたい場合は、この折り返しの指定が大切です。

justify-content: space-between

justify-content: space-between; は、要素を左右の端に寄せながら、要素同士の間に余白を作る指定です。

今回の例では、子要素の幅を width: calc(50% - 10px); にして少しだけ小さくしています。そのうえで space-between を使うことで、左右のリストを端に揃えつつ、リスト同士の間に余白を取っています。

まずは「左右を揃えて、間に余白を作る指定」と覚えておけば大丈夫です。

次に、子要素側で使う width と calc() を見ていきます。

width / calc

次は、子要素である .mikoto-flex-list li の指定です。

/* 子要素 */
.mikoto-flex-list li {
  width: calc(50% - 10px);
 }

width は横幅を指定するプロパティです。ここでは li に 50% を指定し、1つの項目が1行の半分ほどの幅を使うようにしています。

ここで重要になるのが calc() です。li に 50% だけを指定すると、左右の項目で1行の幅を使い切ってしまい、間の余白を作りにくくなります。
そこで width: calc(50% - 10px); を指定すると、左右の li から 10px ずつ幅を引き、間に合計 20px の余白を作れます。ここでは width と calc() を1セットで考えます。

間に合計20pxの余白を作る

ここで親要素に指定した justify-content: space-between が、calc() で空けた余白の位置を決めます。

justify-content の値（Value）一覧

• flex-start（左寄せ）
• flex-end（右寄せ）
• space-between（両端に寄せて、要素の間に余白を作る）
• space-around（要素の「まわり」に余白を作る）
• space-evenly（要素の「間」と「両端」すべてに均等な余白を作る）

他にも値の種類はありますが、まずは今回使う space-between の動きを押さえておけば十分です。

その他、.mikoto-flex-list li a や .mikoto-flex-list li a:hover といったリンクの見た目は、サイトのデザインに合わせて調整します。

おまけ｜flex-direction

flex-direction というプロパティがあります。

親要素に display: flex を指定すると、子要素の並びはデフォルトで横方向（row）になります。
flex-direction は、子要素を並べる「向き」を決めるプロパティで、同じく親要素に指定します。

主な設定値

• row: 左 → 右（標準）
• row-reverse: 右 → 左
• column: 上 → 下（縦並びにしたいとき）
• column-reverse: 下 → 上

無理をして使う必要はありません。リストをあえて「縦」に並べ直したいときや、最後の項目を一番上に持っていきたいときだけ使います。

「こんな設定もあるんだな」程度に知っておけば、今は十分です。

縦並びだったリストを実際に2列にしてみる

ここまで解説したプロパティを使って、縦並びのリストを2列にします。

• 記事タイトル10文字程度
• 20文字程度の少し長めのタイトルです
• 30文字。グリッドを意識した美しい設計図の書き方について
• 余白とフォントサイズが織りなす比率の黄金律と設計思想について
• 余白と計算式が織りなす技術備忘録の新しい形
• 最後の6件目

このリストのCSSは、@media screen and (min-width: 768px) { } で囲っています。
そうすることで、PC画面では2列、スマホ画面では1列に切り替わります。PCのブラウザで見ている場合は、ブラウザ幅を狭めたり、デベロッパーツールを使ったりすると、表示の変化を確認できます。

まとめ｜今回のポイント

長いリストをスッキリ2列にするためのポイントは、主に3つです。

1. 親要素に display: flex; を書く（横並びにする合図）
2. 同じく親要素に flex-wrap: wrap; を書く（2列にするための折り返し許可）
3. 子要素の幅（width）を calc(50% - 10px) などで調整する

Flexboxには他にもいろいろな設定がありますが、2列リストを作るなら、まずはこの基本だけでも十分です。

サムネイル付きのリストでも考え方は同じです。画像のサイズを調整して2列にすると、普段とは違った見栄えになり、リスト表示もスッキリします。

まずは、表示件数の多い新着記事リストや関連記事リストなど、扱いやすい場所から試してみるとよいでしょう。