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」で固定にしています。ここは任意のサイズに変更してください。