【CSS】flexboxで横並びにしたメニューの間隔はcolumn-gapで調整する

Thu, 22 Sep 2022 10:42:17 +0900

margin-rightでもいいけど

グローバルメニューなど、横並びのメニューをdisplay: flex;で作ることがあります。その時、メニュー同士の間に余白を設けるために以下のように、margin-left;やmargin-right;を使っていました。

#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

#global_navi li:not(:first-child) {
    margin-left: 10px;
}

または

#global_navi li:not(:last-child) {
    margin-right: 10px;
}

これでもできるので問題ないのですが、もっとスマートなやり方がありました。

column-gapを使う

今まで知らなかったののですが、以下のように、column-gapを使うと簡単にメニュー間の隙間を簡単に設定できます。margin-leftやmargin-rightと違って、要素の間だけに余白が付くので、最初や最後のliに余白が付いてしまうことを気にしなくて済みます。display: flex;とdisplay: grid;で使えうるみたいです。

#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    column-gap: 10px;
}

ブラウザの対応状況

https://caniuse.com/?search=column-gap https://caniuse.com/?search=column-gap

縦横や縦並びの場合

縦横に並ぶ要素の隙間にはgap

グリッドレイアウトで縦と横に要素が並ぶ場合は、gapプロパティで縦と横に均等な隙間を設けることができます。

縦並びの要素の隙間にはrow-gap

column-gapは横並びですが、縦並びはrow-gapで指定できます。

参考ページ

gap、column-gap、row-gapについては以下のページが参考になりました。

https://ics.media/entry/210628/ https://ics.media/entry/210628/

その他、column関連プロパティのリファレンス

https://www-creators.com/css-prop/column-gap https://www-creators.com/css-prop/column-gap

column-countについて

その他、グリッドレイアウトで横並び1列だけではなく、横2列ずつ縦に多段で並べたいときはcolumn-countで2を指定すれば、6個ある要素が2x3で並んでくれます。

#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    column-count: 2;
}

column-gapの使い方をきっかけに勉強になりました。

隙間 on qwerty.work