【CSS】flexboxで横スクロールを実装する方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSのflexboxで横スクロールを実装する方法をご紹介します。

スマートフォンの限られた横幅スペースでたくさんのアイテムを閲覧できるようにしたい時に大活躍するのが横スクロールです(^o^)

例えば、Apple Musicの「見つける」ページの「新着ミュージック」や「デイリートップ100」のUIがそれにあたります！

Apple Musicの例

限られたスペースを有効活用するにはもってこいの技術ですね(^o^)

それでは見て参りましょう！

CSSのflexboxで横スクロールを実装しよう！
まとめ

CSSのflexboxで横スクロールを実装しよう！

実装のポイント

今回の実装のポイントは、

親要素にdisplay:flex; overflow-x:auto;を指定する
子要素にflex: 0 0 auto;を指定する
子要素の横幅はwidth:calc()などでよしなに調整する

となります。

コードを見ながら確認していきましょう。

今回のHTML

index.html

<div class="Card">
  <div class="Card-Item">
    <a href="" class="Card-Item-ImgBox">
      <div class="Card-Item-ImgBox-Img" style="background: #eee; background-size: cover; background-size: cover;"></div>
    </a>
    <div class="Card-Item-Box">
      <p class="Card-Item-Box-Title">
        <a href="#" class="Card-Item-Box-Title-Link">アイテム１</a>
      </p>
    </div>
  </div>
  <div class="Card-Item">
    <a href="" class="Card-Item-ImgBox">
      <div class="Card-Item-ImgBox-Img" style="background: #eee; background-size: cover; background-size: cover;"></div>
    </a>
    <div class="Card-Item-Box">
      <p class="Card-Item-Box-Title">
        <a href="#" class="Card-Item-Box-Title-Link">アイテム２</a>
      </p>
    </div>
  </div>
  <div class="Card-Item">
    <a href="" class="Card-Item-ImgBox">
      <div class="Card-Item-ImgBox-Img" style="background: #eee; background-size: cover;"></div>
    </a>
    <div class="Card-Item-Box">
      <p class="Card-Item-Box-Title">
        <a href="#" class="Card-Item-Box-Title-Link">アイテム３</a>
      </p>
    </div>
  </div>
  <div class="Card-Item">
    <a href="" class="Card-Item-ImgBox">
      <div class="Card-Item-ImgBox-Img" style="background: #eee; background-size: cover; background-size: cover;"></div>
    </a>
    <div class="Card-Item-Box">
      <p class="Card-Item-Box-Title">
        <a href="#" class="Card-Item-Box-Title-Link">アイテム４</a>
      </p>
    </div>
  </div>
</div>

Cardが親要素でCard-Itemが子要素つまりflexアイテムとなります。

CSS

index.css

.Card{
  margin-top: 20px;
  padding-left: 14px;
  width: 100%;
  overflow-x: auto;
  display: flex;
}
.Card-Item{
  width: calc((100% - 44px) / 3);
  flex: 0 0 auto;
}
.Card-Item:not(:first-child){
  margin-left: 8px;
}
.Card-Item-ImgBox{
  width: 100%;
}
.Card-Item-ImgBox-Img{
  border-radius: 4px;
  padding-top: 100%;
  width: 100%;
}
.Card-Item-Box{
  margin-top: 6px;
}
.Card-Item-Box-Title{
  text-align: center;
  font-size: 12px;
}

子要素にflex: 0 0 auto;を指定しないと、横スクロールにならないのでご注意を(^o^)

サンプル

以下、CodePenのサンプルです！

See the Pen
qBEGZXE by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

参考 Flexboxでの水平スクロールについてQiita

まとめ

以上、CSSのflexboxで横スクロールを実装する方法をご紹介しました。

そういえば、当ブログが使用しているWordPressテーマ「SANGO」の記事末の「関連記事」のカード部分も横スクロールUIということに本記事を書いていて思い出しました笑

「flexboxで横スクロールさせるには、flexアイテムにflex: 0 0 auto;を指定する」

これだけ覚えていただければ幸いです(^o^)

最後までご高覧いただきありがとうございました！

■関連記事（スクロールバーを非表示にする方法）

【CSS】スクロールバーを非表示にする方法