CSS3のflexboxでボックスレイアウトを組んでみる

2013年7月1日現在ですは、flexboxの仕様が変わった為、この記事は古い記事になりました。新しい記事は「CSS3のFlexboxが仕様が変わった！！新しいフレキシブルボックスレイアウトとは！？」になります。

css3になってから、以前のようにfloatを使わないでレイアウトを組むことが出来るようになった。
いままでとは全く概念が変わってボックスレイアウトに関する項目はすごい増えたので数回に分けて書いていこうと思う。

どうやら、フレックスボックスって呼ぶらしいですw

フレックスボックスレイアウトにする為には

フレックスボックスレイアウトにする為には、下記のcss3のdisplayプロパティを利用します。

名前	意味
flexbox	ブロックレベルのフレキシブルボックス
inline-flexbox	インラインレベルのフレキシブルボックス

上記の指定を並べたい要素の親要素に指定することが大事です。

//
#parent{
display:flexbox;
}

#parent{
display:inline-flexbox;
}
//以前の査定ではboxでした
#parent{
display:box;
}
#parent{
display:inline-box;
}

上記の設定をするだけで、横並びフレックスボックスレイアウトが完成してします。
以前のfloatによるボックスレイアウトより断然簡単です。また、幅を指定しなくてもその要素の幅に合わせてくれるのがいいですね。

css3からはフレックスボックスの位置を指定できるようになっています。
プロパティはbox-packというプロパティになります。

名前	意味
start	親要素の左端から横並びになる
end	親要素の右端から横並びになる
center	親要素を基準にフレックスボックスがセンター揃えになる
justify	親要素の幅を基準にフレックスボックスを均等に配置してくれる

上記のプロパティを親要素に指定します。


//左揃え
box-pack:start;

//右揃え
box-pack:end;

//センター揃え
box-pack:center;

//均等揃え
box-pack:justify;
}

先ほどはフレックスボックスの横並びの場合での位置を指定しましたが、縦にしたい時などのボックスの配置を指定できます。通常は横並びになると思うのであまり意識していないですが。

上記のプロパティを親要素に指定します。


//横並びの配置
box-orient:horizontal;

//縦並びの配置
box-orient:vertical;

//こちらについては不明。
box-orient:inherit;
}

という具合にcss3からは横並びのレイアウトが非常に簡単になりました。
その他にもフレックスボックスの子要素に指定するプロパティもあるのでそれは次回書くことにします。