2020-10-30

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

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

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

PC表示時

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

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

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

レスポンシブル時

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

2020 KumaTechLab.