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