flexの均等配置ではみ出した場合に正常なスクロールをさせる

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

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

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

サンプル

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

https://codepen.io/totoraj930/pen/VGpxvb/

問題点

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

回避策

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

仕様は下記を参考に。

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

space-around

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

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

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

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を設定して中央に寄せます。

おわりに

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

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

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