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

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

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

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

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

【解説】　右に寄せる要素（今回だとnav）に、margin-left:autoを設定します。

1
nav {
2
  margin-left: auto;
3
}

子要素のmarginにautoを設定すると、空いたスペース分marginを広げるようです。

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

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

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

【解説記事】

【解説】左右にマージンを設定し、ロゴを真ん中に配置するようにしています。

1
.logo{
2
    margin: 0 auto;
3
}

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

1
.header {
2
  display: flex;
3
  align-items: center;
4
  flex-direction: column;
5
}