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

2020年7月30日

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

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

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

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

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

nav {
  margin-left: auto;
}

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

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

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

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

【解説記事】

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

.logo{
    margin: 0 auto;
}

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

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

元エンジニア・コンサルタント→フリーランスへ。
個人事業主さん向けにWordPress・HP作成の個人レッスンをしています。