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

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

Demo

Points

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

nav {
  display: flex;
}

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

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

nav {
  justify-content: space-between;
}

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

nav {
  align-items: center;
}

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 を学べるエントリーを書いていこうと思います.