HTML & CSS

「display:flex;」によるフレックスボックスでナビゲーションを等幅に並べる

  1. 最終更新日:
  2. 公開日:

CSSの「display:flex;」を使ってフレックスボックスを設定し、ナビゲーションのメニューボタンを全て同じ幅で並べる方法について解説します。

この記事のポイント

  • フレックスボックスの使い方が分かる
  • calc関数を使って自動的にメニューボタンの幅を計算する

フレックスボックスを使ってメニューボタンを横に並べる

displayプロパティに「flex」を使って、メニューボタンを全て等しい幅で横に並べていきます。

表示例
表示例

まずはナビゲーションのHTMLから確認していきます。

HTMLのマークアップ例

<nav id="g_navi">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/concept">コンセプト</a></li>
    <li><a href="/menu">メニュー</a></li>
    <li><a href="/access">アクセス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

リストを使ってメニューボタンを並べ、ナビゲーションを表すnav要素で囲っています。
続いて、CSSのコードを確認します。

CSS コード例

#g_navi ul {
  display: flex;
  margin: 0 auto;
  padding: 0 3%;
  width: 94%;
  max-width: 960px; 
}
  #g_navi ul li {
    width: calc(100%/5);
  }
    #g_navi ul li a {
      display: block;
      padding: 17px 5%;
      width: 90%;
      color: #fff;
      text-align: center;
      text-decoration: none;
    }

今回のCSSの肝になるポイントは2つです。

  • ul要素に「display: flex;」を指定
  • li要素を親要素の幅いっぱいに並べる

1つ目のポイントはul要素に「display: flex;」を指定し、リスト全体をフレックスボックスに設定します。
フレックスボックスの子孫要素は幅を設定することで要素を横方向に綺麗に並べることができます。

2つ目のポイントは子孫要素であるli要素の幅を適切に設定することです。
今回は全てのメニューボタンを同じ幅で並べることを目的としているため、calc関数を使って単純にボタン数(5)で割った値を横幅に設定しています。

具体的には、5つのメニューボタンなので「100% / 5」の計算を行い、各メニューボタンに「20%」の横幅を指定していることになります。

もしメニューボタンの数が6つであれば「100% / 6」、8つであれば「100% / 8」のように、メニューボタンの数に応じて数字を置き換えるだけで幅を自動的に設定することができて便利です。

メニューボタンを横に並べる方法は、今回ご紹介した方法の他にfloatプロパティを使った方法と「display: inline-block;」を使った方法があります。
この2つの方法について、詳しくは「横並びのメニューを作成する」をご覧ください。

記事一覧

関連記事