CSS3 でのレイアウトで使える box 系プロパティのまとめ

Category ：
CSS3

CSS3 でのレイアウトで使える box 要素系のまとめ

今は 3カラムのレイアウトをする際 float を使い clearfix や clear を使ったりと覚えたての頃は頭を悩まされた人も少なくはないかと思います。

でも今後普及するであろう CSS3 で 3カラムのレイアウトする際も display: box; を使うだけで簡単に出来ちゃうんですよね。って事でbox 要素系のプロパティについての紹介をしておきます。

…ここからが続き

display: box; の使い方

指定された要素内のブロック要素（div や dl や p など）は、自動的に横並びになり、かつ最大の高さを持つ要素に高さを揃えてくれます。

対応ブラウザ（2010 3/5 現在）: Safari , Google Chrome , Firefox

指定方法・表示例

#container	{
	width: 100%;
	display: -webkit-box;　/* Safari,Google Chrome用 */
	display: -moz-box;　/* Firefox用 */
}
#main	{
	width: 500px;
	background: #EEE;
	min-height: 500px;
}
#leftBox	{
	width: 250px;
	background: #999;
	min-height: 300px;
}
#rightBox	{
	width: 250px;
	background: #666;
	min-height: 100px;
}

display: box;

display: box; のデモページ

box-ordinal-group の使い方

display: box 内に配置されたブロック要素（div や dl や p など）の表示させる順番を指定します。
HTML の記述順序に関わらず順序を変更したい際に使用して下さい。

対応ブラウザ（2010 3/5 現在）: Safari , Google Chrome , Firefox

指定方法・表示例

#container	{
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
}
#main	{
	width: 500px;
	background: #EEE;
	min-height: 500px;
	-webkit-box-ordinal-group: 2;　/* Safari,Google Chrome用（2番目に表示 */
	-moz-box-ordinal-group: 2;　/* Firefox用（2番目に表示） */
}
#leftBox	{
	width: 250px;
	background: #999;
	min-height: 300px;
	-webkit-box-ordinal-group: 1;　/* Safari,Google Chrome用（1番目に表示） */
	-moz-box-ordinal-group: 1;　/* Firefox用（1番目に表示） */
}
#rightBox	{
	width: 250px;
	background: #666;
	min-height: 100px;
	-webkit-box-ordinal-group: 3;　/* Safari,Google Chrome用（3番目に表示） */
	-moz-box-ordinal-group: 3;　/* Firefox用（3番目に表示） */
}

box-ordinal-group

box-ordinal-group のデモページ

box-flex の使い方

display: box を指定された要素内に配置されたブロック要素（div や dl や p など）の幅を指定します。
ブロック要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。簡単に言うとブラウザの横幅に合わせて伸縮してくれます。

対応ブラウザ（2010 3/5 現在）: Safari , Google Chrome , Firefox

指定方法・表示例

#container	{
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
}
#main	{
	-webkit-box-flex: 1;　/* Safari,Google Chrome用 */
	-moz-box-flex: 1;　/* Firefox用 */
	background: #EEE;
	min-height: 500px;
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
}
#leftBox	{
	width: 250px;
	background: #999;
	min-height: 300px;
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
}
#rightBox	{
	width: 250px;
	background: #666;
	min-height: 100px;
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
}

box-flex

box-flex のデモページ

box-sizing の使い方

box-sizing プロパティで指定できる値は content-box と border-box の2種類となっています。
content-box と指定した場合は padding と border の大きさを含まずに、border-box と指定した場合は含めて処理を行います。

対応ブラウザ（2010 3/5 現在）: Safari , Google Chrome , Firefox , Opera , Internet Explorer 8

指定方法・表示例

div     {
	width: 600px;
	border: 10px solid #CCC;
	margin: 0 auto 20px;
	min-height: 100px;
	padding: 50px;
}
#content-box	{
	-webkit-box-sizing: content-box;　/* Safari,Google Chrome用 */
	-moz-box-sizing: content-box;　/* Firefox用 */
	-ms-box-sizing: content-box;　/* Internet Explorer 8用 */
	box-sizing: content-box;　/* Opera用 */
}
#border-box	{
	-webkit-box-sizing: border-box;　/* Safari,Google Chrome用 */
	-moz-box-sizing: border-box;　/* Firefox用 */
	-ms-box-sizing: border-box;　/* Internet Explorer 8用 */
	box-sizing: border-box;　/* Opera用 */
}

box-sizing