CSSのFlexboxでスマホなどで使える横スクロールメニューを作る

よく見かけるようになったCSSだけでできる横スクロールメニューの作り方です。最近、PCではカルーセルでスマホでは横スクロールメニューと使い分けるのが一番いいような気がしています。横並びする方法としていくつかありますが、ここでは Flexbox を使っていきます。

横スクロールメニュー


<div class="container">
  <div class="menu">
    <div class="item">
      <a href="">item #1</a>
    </div>
    <div class="item">
      <a href="">item #2</a>
    </div>
    <div class="item">
      <a href="">item #3</a>
    </div>
    ...
  </div>
</div>

.container {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.menu {
  display: flex;
}
.item > a {
  display: block;
}

余計なCSSは省略しています。ポイントは white-space: nowrap;改行させない のと、 overflow-x: auto; で横スクロール可能にしていることです。

カード型デザイン


<div class="container">
  <div class="menu">
    <div class="item">
      <a href="">long long long long long text.</a>
    </div>
    <div class="item">
      <a href="">long long long long long text.</a>
    </div>
    <div class="item">
      <a href="">long long long long long text.</a>
    </div>
    ...
  </div>
</div>

.container {
  padding: 20px 0 20px 20px;
  white-space: nowrap;
  background-color: #3f51b5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.menu {
  display: flex;
  margin-left: -20px;
}
.item {
  padding-left: 20px;
  flex: 0 0 160px;
  white-space: normal;
  word-wrap: break-word;
}
.item > a {
  display: block;
  padding: 1em 1.4em;
  color: #000;
  text-decoration: none;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
/* padding-rightが描画されないのを修正 */
.item:last-child {
  position: relative;
}
.item:last-child::after {
  position: absolute;
  top: 0;
  left: 100%;
  width: 20px;
  height: 1px;
  content: '';
}

横スクロールメニューの応用として、カード型デザインをよく見かけます。 white-space: nowrap;子要素に継承 されるため、カード内のテキストは改行されるように white-space: normal; を指定します。

また、 padding-right が描画されないバグについては以前記事を書いているので詳しく知りたい場合は見てください。