display: flexjustify-content: space-aroundとかしたときにoverflow: autoでうまくスクロールできない現象があったのでその回避方法です。

  • 横幅に余裕がある場合は均等配置
  • 横幅が足りなければスクロール

といったことをしたい状況とします。

サンプル

はじめに成功と失敗のサンプルを置いておきます。

See the Pen VGpxvb by totoraj (@totoraj930) on CodePen.

問題点

justify-contentで配置すると中心が基準となるspace-around,space-evenly,centerで親要素からはみ出した時に左側にスクロールできなくなる。

回避策

marginを使って独自に実装してしまう。

仕様は下記を参考に。

justify-content - CSS: カスケーディングスタイルシート | MDN

space-around

各アイテムの両側に均等に余白を分配する。

/* .flex-listが親でliが子の場合*/
.flex-list li {
	margin: 0 auto;
}

flexアイテムのmarginautoの場合すべて均等に分配されるためこれだけで実現できます。

space-evenly

余白がすべて均等に分配される。

/* .flex-listが親でliが子の場合*/
.flex-list li {
	margin: 0 auto;
}
.flex-list:before,
.flex-list:after {
	content: "";
	width: 0;
	visibility: hidden;
	margin-left: auto;
}

space-aroundとほとんど同じですが最初と最後のアイテムのmarginを2倍にするために親の疑似要素にもmarginを設定します。

center

アイテムを中央に寄せる

/* .flex-listが親でliが子の場合*/
.flex-list li:first-child {
	margin-left: auto;
}
.flex-list li:last-child {
	margin-right: auto;
}

最初と最後のアイテムだけmarginを設定して中央に寄せます。

おわりに

今回は横方向ですが縦方向でも同様に実装することが可能です。

これで横並び均等配置ではみ出したらスクロール可能なメニューが爆速でつくれる。

・・・ま、まぁ使う場面は限られてくるだろうけど。