【CSS】flexboxで横並びにしたメニューの間隔はcolumn-gapで調整する
目次
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; }
ブラウザの対応状況
縦横や縦並びの場合
縦横に並ぶ要素の隙間にはgap
グリッドレイアウトで縦と横に要素が並ぶ場合は、gap
プロパティで縦と横に均等な隙間を設けることができます。
縦並びの要素の隙間にはrow-gap
column-gap
は横並びですが、縦並びはrow-gap
で指定できます。
参考ページ
gap
、column-gap
、row-gap
については以下のページが参考になりました。
その他、column関連プロパティのリファレンス
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
の使い方をきっかけに勉強になりました。