CSS3で可能になった新しいレイアウト法「ボックスレイアウト」。
新しいといっても、それはあくまでレイアウトの指定方法であり、レイアウトの形自体は普段我々がよく使っているものです。
基本的に縦に区切られた2カラム、3カラム、4カラム…といったレイアウトは全てボックスレイアウトと言えるでしょう。

これまでやっていたfloat指定して実現する方法に比べて、一体どんなメリットがあるのか？

• とてもシンプル。（CSS一行で済みます）
• 中の要素のマークアップもシンプルで済む。
• JSを使わずにボックスの高さを揃えることができる。
• ワンタッチでカラムの順番を入れ替えることが可能。

などなど。
IEが対応していないのであれですが、一足先にそんな魅力的なボックスレイアウトの世界を覗いてみましょう。

記述方法

display: box;と指定すればその子要素が並列に並んでくれます。
例えば3カラムのボックスを作ってみましょう。
ここではそれぞれのカラムにidを指定し、それをclass=”wrapper”を指定したdivで囲みました。
（プレフィクスの位置にご注意ください）

.wrapper{
	display: -webkit-box;
	display: -moz-box;
}

#contents{
	width:600px;
	background: #6FF;
}

#nav1{
	width: 200px;
	background: #FF6;
}

#nav2{
	width: 160px;
	background: #F6F;
}

このようにfloatを使用せず、簡単に3カラムを作ることが出来ました。
注目すべき点は各ボックスの高さが自動で揃っていること。
これまではJavascriptに頼っていたこともボックスレイアウトなら簡単に実現可能です。

リキッドレイアウトで使用する

このボックスレイアウトを使用してリキッドレイアウトを作る場合、単純に考えればwidthを「%」指定すればOKですが、もしナビゲーションの幅は固定してコンテンツ部分だけ可変にしたいという場合はどうすればいいでしょうか？
そんな時のために用意されているのが『box-flex』というプロパティ。
box-flex: 1;とすることで、そのボックスを可変にすることが可能です。

例えば先程の例で、2つのナビゲーションはwidthを固定で、コンテンツ部分だけを可変にしたいとすると、

.wrapper{
	display: -webkit-box;
	display: -moz-box;
}

#contents{
	background: #6FF;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
}

#nav1{
	width: 200px;
	background: #FF6;
}

#nav2{
	width: 160px;
	background: #F6F;
}

#contentsにbox-flex: 1;を指定します。すると

このようにナビゲーションの幅を固定したリキッドレイアウトを作成することが出来ます。
いや〜便利ですね！

順番を入れ替える

カラムの順番を変えたい場合は『box-ordinal-group』というプロパティを使用します。
値は数値で指定し、数値が低いものから先に並んでいきます。
例えば#nav1を左に、コンテンツを中央に配置してみましょう。

#contents{
	background: #6FF;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
}

#nav1{
	width: 200px;
	background: #FF6;
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
}

#nav2{
	width: 160px;
	background: #F6F;
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
}

簡単に順番を入れ替えることができました。
デザインの変更はもちろん、SEO対策としてxhtml上でコンテンツ部分を先に記述したい場合にも使えます。

ボックスの中央にコンテンツを配置する

最後にdisplay: box;を使用してボックスの中央にコンテンツを配置する方法をご紹介。
例えば、通常ボックスの中に画像を配置すると

このように隅に寄って配置されます。
従来のCSSでは横方向の中央配置はtext-alignなんかで簡単にできますが、縦方向の中央配置は少々困難です。
そこで登場するのが『box-align』プロパティと『box-pack』プロパティ。
box-align: center;で縦の、box-pack: center;で横の中央配置を指定することが出来ます。

.wrapper{
	width: 520px;
	height:400px;
	background:#6FF;
}

#contents{
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -moz-box;
	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
}

ポイントはdisplay: box;を指定したボックスにwidth: 100%;とheight: 100%;を指定することでしょうか。
これでボックスの中央にコンテンツを配置することが出来ます。

ウィンドウの中央にコンテンツを配置する場合や、ボックスの中央にアイコンを配置するなど、使いどころはいろいろありそうですね。

総括

いいとこ尽くしで非常に便利なボックスレイアウトですが、信じられないことにIE9ではサポートされないようです。
ちなみにOperaでもまだサポートされていないので、現状ではSafari、Chrome、Firefoxでしか使えません。
まあ全体のレイアウトに関わってくる部分なので、普及にはまだ少し時間がかかりそうですね。

はやいとこ、このマークアップが当たり前の時代が来て欲しいもんです。
個人的にはMicrosoftさんにはブラウザの開発はもう…
それではよきクリエイターライフを。