Flex使用でスマホ表示時に横スクロール

https://gyazo.com/03361c437acd717dcf737deabb4ed385

code:sample.html

<div class="sp-scroll__container">

<div class="sp-scroll__item">item</div>

<div class="sp-scroll__item">item</div>

<div class="sp-scroll__item">item</div>

<div class="sp-scroll__item">item</div>

<div class="sp-scroll__item">item</div>

<div class="sp-scroll__item">item</div>

<div class="sp-scroll__item">item</div>

</div>

最低限必要な部分だけ※例外あり

flexbox じゃなくて display: inline 使ったほうがもっと短く書ける

code:sample.scss

@media (max-width: 900px) { /* 適当な数値 */

.sp-scroll__container {

display: flex;

flex-wrap: nowrap; /* ここ例外。初期値なので書く必要がなければ書かない */

overflow-x: auto; /* スクロール出す */

-webkit-overflow-scrolling: touch; /* iOSの挙動をスムーズにする */

scroll-snap-type: x; /* ブラウザによってスナップさせる */

max-width: 100vw; /* ウインドウ幅を設定 */

}

.sp-scroll__item {

flex-basis: 300px; /* 横幅。適当な数値 */

flex-shrink: 0; /* はみだしを許可 */

scroll-snap-align: start; /* スナップ位置を端に指定 */

}

}

動作サンプル

scroll-snap-type

mandatory という値も書けるけど…

mandatory＝必須という意味

絶対スナップさせる

ひとつのアイテムがコンテナより大きいとき、はみ出た部分がうまく見えなかった

関連リンク

Flex 関連

親要素（conteiner）

子要素（item）

scroll-snap 関連

その他

-webkit-overflow-scrolling について

MDNには使うなって書いてある😇