WordPressグローバルナビの横並びメニューをFlexBoxで均等幅表示する方法

WordPressのグローバルナビのメニューを均等幅にしたいという需要は結構あるようです。

僕も、フォーラムなどで何度か質問をいただきました。

通常、「横並びのリスト幅」を均一にするには、CSS3前では以下のような、表（テーブル）の表示方法を用いたCSS指定が一般的だったようです。

• リストを横並びにした際均等にすることができるdisplay:table-cellを使ってみる
• table-cellを使って要素を均等に配置する方法 | delaymania
• 要素を横並びに配置できる display:table-cell の基本的な使い方と注意点

ただ、これらの記法は個人的には少しややこしい感じがします。（僕が使い慣れていないだけ）

けれど、CSS3のFlexBoxを使えば、もう少し単純に実装できるので、その方法紹介したいと思います。

イメージにすると、これまではこんなのだったのが

こんな感じに均等表示されます。

こんな感じの表示を、FlexBoxを用いて手軽に行うことができます。また拡張性は、こちらの方が高いです。

photo by Rich

メニューを1列に均等幅表示する方法

グローバルナビのメニューを1列に均等幅表示するには、簡単に書くと以下のような設定を追加する形になります。（※CSSセレクタは、テーマのものに合わせてください。）

#navi ul{
  display: flex; /*フレキシブルボックス*/
  text-align: center; /*センタリングは好みで*/
}

#navi ul li{
  width: 300px; /*幅は大きめに調節する*/
}

テキストのセンタリングが不要ならば、ulとliにそれぞれ1つずつプロパティーを追加設定するだけで均等幅表示を実現することができます。なんて簡単。

動作確認すると、こんな感じに表示されます。

ただ、Can I use…で確認してみると、FlexBoxは、現行のモダンブラウザでは、ほぼ利用できるようですが、Safariなどは「-webkit-」のようにベンダープレフィックスが必要なようです。

また、IE10、古いアンドロイドブラウザなど、様々なことを考慮すると、以下のように書く必要があるかもしれません。

#navi ul{
  display: -webkit-box; /* Android 2~4 */
  -webkit-box-pack: justify; /* Android 2~4 */
  display: -webkit-flex;
  display: -ms-flex;
  display: flex; /*フレキシブルボックス*/
  text-align: center; /*センタリングは好みで*/
}

#navi ul li{
  width: 300px; /*幅は大きめに調節する*/
  -webkit-box-flex: 1; /* Android 2~4 */
}

こうなると、ちょっと面倒くさいですね。古いIEとかAndroidブラウザとかは無視するとしても、-webkit-だけは、まだ使用しておいた方がよさそうです。

メニューを複数行、均等幅表示する方法

上記の方法だと、メニュー項目が多数あった場合は、親要素の幅に収まりきるように、無理やり幅を調節されてしまうので、以下のようにぎゅうぎゅうに詰まった状態で表示されてしまいます。

そんな事はないようメニューを、均等幅表示させたい場合、ここまでメニューを置く人は、あまりおられないと思いますが、一応、複数行表示する方法も紹介しておきます。

複数行表示させるには、簡単に書くと以下のように書きます。

#navi ul{
  display: flex;
  flex-wrap: wrap; /*子要素の折り返し設定*/
  text-align: center; /*センタリングは好みで*/
}

#navi ul li{
  width: 152px; /*グローバルナビの幅に合わせて調節*/
}

「flex-wrap: wrap;」で折り返し設定をして、liの幅をグローバルナビ幅に調節するだけで、以下のように複数行に渡り、均等幅表示を行うことができます。

これは、「リストをテーブル表示にする方法」で実現はできないのではないかと思います。（できるとしても、かなりトリッキーな方法が必要そう。）

ベンダープレフィックスをつけた設定は、以下のようになるかと思います。

#navi ul{
  display: -webkit-box; /* Android 2~4 */
  -webkit-box-pack: justify; /* Android 2~4 */
  display: -webkit-flex;
  display: -ms-flex;
  display: flex; /*フレキシブルボックス*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; /*子要素の折り返し設定*/
  text-align: center; /*センタリングは好みで*/
}

#navi ul li{
  -webkit-box-flex: 1; /* Android 2~4 */
  width: 152px; /*グローバルナビの幅に合わせて調節*/
}

注意点

今回のカスタマイズの注意点として、以下のようなことがあります。

• あくまで一般的なパソコン表示時のグローバルナビ用の設定
• 上記の設定は、一般的なグローバルナビスタイルに追加する設定
• サブメニューを表示する場合のことは考慮していません
• モバイルでメニュースタイルを変更している場合は影響するので修正が必要
• グローバルナビのCSSセレクターはそれぞれ利用しているテーマに合わせる必要がある

あと、やはりフレックスボックスは新しい機能なので、いろいろなブラウザで動作確認する必要はあるかもしれません。

詳しいフレックスボックスの使い方などは、以下のサイトが分かりやすいと思います。

• CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG
• これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス
• CSS Layout – Flexbox

まとめ

ベンダープレフィックスを書く必要さえなければ、フレキシブルボックスは、数行追加するだけで、使えるようになるので、かなり簡単です。

とりあえず、これからはベンダープレフィックスなしでも対応するブラウザが増えていくと思いますので、何年後かには、利用もさらに手軽になるのではないかと思います。