flexboxを使用した横スクロール可能なレイアウト

概要

cssのflexboxを使用しつつ、横スクロールが可能なレイアウトのサンプルです。flexの設定ですこし手間取ったので記録しておきます。要件は以下の通り。

• 横幅を縮めると横スクロールになる
• 横幅を広げると中身の数で均等に分かれる
• 中身の文字列が多い時は、改行せずに横幅が広がる

サンプル

See the Pen scroll-x flexbox by T_Y (@y___k) on CodePen.

flexboxの外側でoverflow-x: autoして、中身にflex設定をするだけです。
flexは、flex-grow, flex-shrink, flex-basis の一括指定プロパティです。（MDN）

flex.scss

.item {
  flex: 1 0 200px;
  // flex-grow: 1; … 横幅を広げた時にいっぱいまで広がるように設定
  // flex-shrink: 0; … 横幅が調整されて縮まらないように設定
  // flex-basis: 200px … 基本の幅を指定

  white-space: nowrap;
  // 改行しないように
}

備考

IE、Edgeは未確認です。確認後に追記します。