【CSS】flexboxでヘッダーのメニューを横並びに

CSS

2022.06.09 2021.03.05

こんにちは、素人エンジニアです。
ホームページのヘッダーを作った時、メニューの位置を横並びにしたいですよね。marginやpaddingを調整するのは大変だなぁと思っていたら、簡単に横並びにする方法を見つけましたので紹介します。

メニューを横並びにするならdisplay: flex;

サンプルでは、About、News、Access、Contactというメニューを並べてみました。

メニューの各要素は、navタグの中のliタグで列挙しています。

<nav>
  <div class="nav-container">
    <ul class="global-nav">
      <li><a href="#">About</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Access</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

ここに、CSSでdisplay: flex;を指定してあげるだけで、横並びになります。

.global-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

子要素の調節は、flex: 伸び縮み幅；

これだけでは、配置がうまくありませんので、flex: 0 0 25%;で調節します。

.global-nav li {
  flex: 0 0 25%;
  border-top: 1px solid #72818f;
}

display: flex;を指定した要素の子要素であるliタグの幅を決めています。サンプルではメニューが4つなので、100%÷4で25%幅にすればちょうど綺麗な配置になります。伸び縮みは無しで良いので０としています。

いかがでしょうか。これだけでメニューが均等に横並びになりました。
細かい調整をすることもないので、大雑把な私にぴったりの方法だと思っています。
全力で多用していきます！

メニューを横並びにするならdisplay: flex;

子要素の調節は、flex: 伸び 縮み 幅；

コメント

子要素の調節は、flex: 伸び縮み幅；