概要

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）

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

備考

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