cssのみで要素を並べて横スクロールさせる

スマホで見るとスクロールバー消えます。




サンプル

See the Pen cssのみで要素を並べて横スクロールさせる by takapen (@takapen) on CodePen.

html

img
test



img
testtesttestテストテストテストテストテストテストテストテスト



img
testtesttest



img
testtesttest



img
testtesttest


...
...
...


img
testtesttest

css

* {margin: 0;padding: 0;}
li {list-style:none;}


.slide {
  width: 400px;
  margin: 50px;
  box-sizing: border-box;
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.slide__item {
  width: 150px;
  margin-right: 10px;
  background: #ccc;
  flex: 0 0 150px;
}
.slide__item__img {
  width: 100%;
  height: 50px;
  background: #666;
}