BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
「フレックスボックス」は、フロート(float)に代るCSSの新しいレイアウト機能です。
実際に使われているサイトも多くなっています。
複数のボックスを横や縦に整列させたりするのを、フロートより柔軟に、かつ簡単にできるのが最大の特徴です。

特に伸縮するボックスをレイアウトするのに長けていて、レスポンシブなどの現代的なWebデザインの強力な味方です。
今回はフレックスボックスをもっとも基本的な機能を使って、グローバルナビゲーションを作成する方法をご紹介いたします。

利用シーン

  • リンクのリストが横に並ぶグローバルナビゲーションを作成するとき
  • フレックスボックスで作成したナビゲーションの各項目を均等に配置したいとき

Flexboxの基本構造

See the Pen
eYgaZGb
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

解説

liのボックスを横一列に並べるには、その親要素(ul)にdisplay:flex;を適用するだけです。
display:flex;が適用された要素の子要素は、デフォルトで左揃えで横一列に並びます。
なお、display:flex;を適用した要素(親要素)を「フレックスコンテナー」、その子要素を「フレックスアイテム」といいます。

フレックスボックスの仕組み

フレックスボックスは、複数のボックスを横方向・縦方向に整列して表示するためのレイアウト機能で、次のようなことができます。

  1. ① ボックスを横一列、または縦一列に並べる
  2. ② ボックスを複数行、または複数列に並べる
  3. ③ ボックスの並び順を入れ替える
  4. ④ コンテンツの量にかかわらず、横方向に並んだボックスの高さを揃える。または縦方向に並んだボックスの幅を揃える。
  5. ⑤ 並んでいるボックスのサイズを伸縮させて、親要素にぴったり収るようにする

ナビゲーションの各項目を右揃えにしたいとき

フレックスアイテムを終端揃え(右揃え)にする

justify-content:flex-end;

See the Pen
vYgwWge
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

解説

justify-contentは、フレックスアイテムの横方向、または縦方向の行揃えを設定するプロパティです。
この要素はフレックスコンテナーのスタイルに追加します。
justify-contentプロパティに指定できる値はいくつかあります。

flex-startフレックスアイテムを始端揃えにする。
flex-endフレックスアイテムを終端揃えにする。
flex-centerはフレックスアイテムを中央揃えにする。

ナビゲーションの各項目を均等に配置したいとき

フレックスアイテムを均等に配置する

① justify-content:space-between;
② justify-content:space-around;

① justify-content:space-between;

See the Pen
yLgWOxG
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

② justify-content:space-around;

See the Pen
WNRBway
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

[space-between]と[space-around]の違いはなに?

justify-contentに使用できる値[space-between]と[space-around]は、どちらもフレックスアイテムを等間隔で配置します。

違いは最初と最後のフレックスアイテムの配置方法にあります。

space-between 最初のフレックスアイテムと最後のフレックスアイテムを、それぞれ親要素(フレックスコンテナー)の左端、右端に配置します。
space-around すべてのフレックスアイテムの左右にに均等のスペースを設けます。
最初のフレックスアイテムの左側にも、最後のフレックスアイテムの右側にも同じスペースが空くので、[space-between]に比べて真ん中によったような配置になります。