【CSS】Flexboxで実装する、実践的なヘッダーのレイアウト3つ

よくあるヘッダーのレイアウトを、Flexboxで実装するやり方をご紹介します。
今回は3パターンだけ紹介していますが、他にも様々なレイアウトに応用できます。

この記事の目次

左にロゴ、右にナビゲーション

header {
    display: flex;
    align-items: center;
}

まずは「display: flex;」でロゴとナビゲーションを横並びに。
「align-items: center;」で上下中央揃えにします。

nav {
  margin-left: auto;
}

この記述によって、navが右側に配置されます。

Flexboxの子要素にmargin「auto」を指定すると、指定した方向から要素を押し出す特性があります。
例えば、「margin-right」を指定すれば左側に配置され、「margin-top」を指定すれば下に配置されます。

これを利用し、navに「margin-left: auto;」をかけると右側に押し出されるようになります。

.logo {
    margin: 0 auto;
}

上述した例と原理はまったく同じです。
「.logo」の左右のmarginを「auto」にすることで、左右のナビゲーションを押し出しています。

nav {
    margin: 0 auto;
}

中央にある<nav>にたいして、左右のmarginを「auto」にし、ロゴとボタンを押し出しています。
「.logo」に「margin-right: auto;」、「.btn」に「margin-left: auto;」でも同様の見た目になります。

ブラウザによってベンダープレフィックスが必要になります。
2019年最新のベンダープレフィックスは下記記事をご覧ください。

今まではfloatで実装するのが当たり前でしたが、Flexboxがスタンダードになった今、これだけ柔軟に対応できます。
Flexboxを使えばタグを入れ子にする頻度も減りますし、なにより実装が簡単です。
ぜひ積極的に使っていきたいですね。