【CSS】overflowとFlexboxで横スクロール可能な横並びアイテムを実装する

HTML/CSS

【CSS】overflowの概要と具体例でoverflowの概要について紹介しました。
今回はoverflowの応用例として、スクロール可能な横並びアイテムの実装方法について紹介します。

スクロール追加対象のサンプルコード

<div class="container">
  <div class="container__item">item</div>
  <div class="container__item">item</div>
  <div class="container__item">item</div>
  <div class="container__item">item</div>
</div>


.container {
  display: flex;
  border: dotted;
}

.container__item {
  width: 200px;
  height: 200px;
  background: lightblue;
}

.container__item:not(:last-child) {
  margin-right: 10px;
}

See the Pen
Untitled by Toshiharu Nishina (@nishina555)
on CodePen.

横スクロールの追加方法

横並びアイテムに横スクロールを追加する手順
  1. 横並びの要素を囲む
  2. 親要素に『display: flex』と『overflow-x: scroll;』を追加
<div class="wrapper">
  <div class="container">
    <div class="container__item">item</div>
    <div class="container__item">item</div>
    <div class="container__item">item</div>
    <div class="container__item">item</div>
  </div>
</div>


.wrapper {
  display: flex;
  overflow-x: scroll;
  background: lightgreen;
}

.container {
  display: flex;
  border: dotted;
}

.container__item {
  width: 200px;
  height: 200px;
  background: lightblue;
}

.container__item:not(:last-child) {
  margin-right: 10px;
}

See the Pen
scroll-line-items-after by Toshiharu Nishina (@nishina555)
on CodePen.

参考資料

RECOMMEND