CSSのdisplay:flexでスマホとタブレットの横スクロールが実装できない場合の対処法
CSS3から導入されたdisplay:flexを応用すれば、JavascriptやJQueryを使ったcarousel（カルーセル）スライダーのようなコンテンツを手軽に実装できます。
レスポンシブwebデザインの際に、PCビューでカラム表示もしくはグリッド表示したカードレイアウトの投稿記事コンテンツなどを、モバイル端末で表示した際に横スクロール表示させるのに大変重宝します。
.wrap {
display: flex;
}
.wrap .item {
width: 85%;
margin: 1.5em;
}しかし、横スクロールさせたい.wrapの親要素などの状況によっては、うまく実行されないケースが稀にあります。画面からははみ出さずに親要素内で収まってしまう、画面からはみ出たものの横スクロールできない、など...
そのような状況になった時に親要素のCSSを見直すのが難しい場合は、プロパティの値を別の値に変えるだけで解決できるかもしれません。
その前に、まずはこのプロパティを使って試してみてください
本題に入る前に、まずはdisplay:flexを使った上で、下のCSSプロパティを入れていない場合は記述して検証をしてみましょう。
overflow-x: auto !important;一応、このoverflow-xプロパティは、画面横軸にコンテンツがはみ出た際の表示をコントロールします。画面縦軸はoverflow-x、画面縦横含めたものはoverflow。
ちなみに、本件においてはoverflow-x:scrollにする必要はありません。
念の為、display:flexにも!importantを付けておきましょう。
overflow-x 実装サンプル
.wrap {
display: flex !important;
overflow-x: auto !important;
}
.wrap .item {
width: 85%;
margin: 1.5em;
}状況に応じて!importantは採用してください。
これでもうまくいかない場合は、width:xxxを追加してみましょう。
width 実装サンプル
.wrap {
display: flex;
overflow-x: auto !important;
width: 768px !important; /* 値は状況に応じて書き換えてください */
}
.wrap .item {
width: 85%;
margin: 1.5em;
}状況に応じて!importantは採用してください。
これでもダメなら、次にご紹介する値とサンプルコードでおそらく解決するはずです！
-webkit-boxという値をdisplayプロパティに採用する
プロパティの-webkit-box-flexではありません。
-webkit-boxという値を使う事によって、簡単に解決できるはずです。
早速、この値を使ったサンプルソースコードをシェアいたします。
-webkit-box 実装サンプル（メディアクエリ付き）
/*メディアクエリやwidthなどの値は状況に応じて変えてください。*/
@media screen and (max-width:768px) {
.wrap {
display: -webkit-box;
overflow-x: auto;
width: 100%;
}
.wrap .item {
width: 85%;
margin: 1.5em;
}
}以上、CSSのdisplay:flexでスマホとタブレットの横スクロールが実装できない場合の対処法のご紹介でした。