Flexboxで作るヘッダーのサンプル集

Flexboxは、CSSはWebページのレイアウトを設定できるモジュール。

Flexboxを使うと簡単に整列したり、配置できるようになるので、ヘッダーなどのレイアウトに使われています。

今回の記事では、Flexboxを使ったヘッダーの作り方を紹介します。

よくあるヘッダーレイアウトをFlexboxで作る

左にロゴ、右にメニューがあるヘッダーレイアウト

【解説】

一部だけ右寄せさせたい場合、右に寄せる要素（今回だとnav）に、margin-left:autoを設定します。

nav {
  margin-left: auto;
}

私は、このmarginの挙動が理解できなかったのですが、子要素のmarginにautoを設定すると、空いたスペース分marginを広げるようです。

今回の場合は、navの左の空きスペースを埋めるようにmarginが拡張されるので、navは右側に押し出されます。

逆に、ロゴの方にmargin-right:autoを設定すると、ロゴが左に移動します。

margin:autoは上下中央の配置になります。

【解説記事】

• CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック

真ん中にロゴ、左右にメニューがあるヘッダーレイアウト

【解説】

.logo{
    margin: 0 auto;
}

これで、ロゴを真ん中に配置するようにしています。

上にロゴ、下にメニューがあるヘッダーレイアウト

【解説】

.header {
  display: flex;
  align-items: center;
  flex-direction: column;
}

ロゴとメニューは縦に並べたいので、flex-direction: columnと設定しています。