CSS3のFlexboxを使ってみた

環境: MAC OSX
ブラウザ: GoogleChrome バージョン38

Flexboxとは？

• 複雑なwebページのレイアウトするときに役に立つ
• レスポンシブデザインを作るのに便利

※下記のサイトから引用しています。

Flexbox レイアウトは、複雑な Web ページをレイアウトすることを目的とし、画面やブラウザー ウィンドウのサイズがさまざまに変化する場合にも要素の相対的な位置とサイズを一定に保つ場合に、特に役立ちます。

ここに詳しく載っています
Internet Explorer デベロッパー センター

Flexboxレイアウトを使って横並びメニューを作ってみる

手順

1. Flexboxレイアウトを使うためにFlexboxコンテナーを作る
2. Flexboxコンテナーで指定できるプロパティを使ってレイアウトしていく

※htmlの記述は変わらないため一部省略します

sample.html

<ul>
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
  <li>menu5</li>
</ul>

sample.css

ul{
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;

  flex-direction: row;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;

}

display: flex;と指定するとFlexboxコンテナーとなり、
コンテナーの子要素はFlexboxアイテムと自動的になります。
上記のcssではulがFlexboxコンテナー、それの子要素であるliがFlexboxアイテムとなります。

Flexboxコンテナーで指定できるプロパティ
ごく一部を紹介します。

flex-direction Flexboxアイテムの配置方向(並び順)を指定できます。

flex-direction: row;
rowは 初期値です Flexboxアイテムを左から右に順に配置

flex-direction: row-reverse;
row-reverseは Flexboxアイテムを右から左に順に配置

flex-direction: column;
columnは Flexboxアイテムを上から下に順に配置

他にも色々なプロパティがあります。
今後はflexboxレイアウトが主流になっていくのかな