[phiary] CSS tips - Flexbox レイアウトでヘッダーナビゲーションを作ってみよう

※ こちらで見るとページ内でデモの実行, 編集ができます

今回は Flexbox を使ってヘッダーナビゲーションを作る方法を紹介します.

今までは float もしくは display: inline-block でやるのが定石だったと思うのですが Flexbox を使えばもっとカンタンかつ柔軟なヘッダーナビゲーションを作ることができます.

Demo

Points

Flexbox 化して横並びにしよう

基本ですね. display: flex を指定して flexbox 化することで横並びにします.

nav {
  display: flex;
}

justify-content でそれぞれ画面端に寄せよう

justify-content を指定することで flexbox 内の要素を, 主軸(デフォルトでは横(row)) に添ってどう並べるかを変更することができます.

今回は div.title は左寄せ, ul は右寄せにしたいので下記のように指定しています.

nav {
  justify-content: space-between;
}

align-items で縦揃えを調整しよう

align-items は, 主軸と垂直方法の軸に対してどう並べるかを指定できるプロパティです.
今回は立て揃えは中央にしたいので下記のように指定しています.

nav {
  align-items: center;
}

ul と a タグをリセットしよう

ul タグや a タグはブラウザがデフォルトでいくつかスタイルを当てています.
これが地味に邪魔だったりするのでしっかり把握してリセットしてあげましょう.

ul は margin, padding, list-style をリセットします.

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a タグは color, text-decoration をリセットします.

a {
  color: inherit;
  text-decoration: none;
}

Flexbox にもだいぶ慣れてきました.
アウトプットがてらいくつか事例を交えつつ Flexbox を学べるエントリーを書いていこうと思います.