flexをレスポンシブでスクロールにする

PC表示時はflexで横並びに表示していて、レスポンシブル時は縦並びではなく、横のスクロールにする方法を紹介します。

PC表示時

See the Pen flex-normal by s-Kuma (@kumatechlab) on CodePen.

<div class="cards">
  <div class="card">
    //中身
  </div>
  <div class="card">
    //中身
  </div>
  <div class="card">
    //中身
  </div>
</div>

大枠にflexを当てることで横並びにしています。

flexの基本的な使い方です。

レスポンシブル時

See the Pen flex-scroll by s-Kuma (@kumatechlab) on CodePen.

.cards {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: auto;
}

.card {
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  margin-right: 10px;
  flex: 0 0 150px;
}

「flex-warp」で「nowrap」を指定し、自動で折り返さないようにしています。

「overflex-x」で横方法のスクロールを可能にしています。

「width:auto」で横幅をコンテンツに合わせます。

「flex」は「flex-grow」「flex-shirink」を消しておき、横幅を固定「150px」で固定にしています。ここは任意のサイズに変更してください。