Fri, October 20, 2017

floatを使わずにカラムレイアウトを簡単に実現できるCSS3 display: box;が便利そう

CSS Lectureからマルチカラムレイアウトで使えるCSS3 box 系プロパティのまとめをご紹介します。

■display: box; の使い方

対応ブラウザ:Safari、Google Chrome、Firefox

display: box;を使えばfloatを使用せず、かつ親要素にclearfixなど指定する必要もなく簡単にカラムレイアウトを実現することができます。
また、最大の高さを持つ要素に高さを揃えることもできます。非常に便利です。

サンプルコード

#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; のデモページ|CSS Lecture

■box-ordinal-group の使い方

対応ブラウザ:Safari、Google Chrome、Firefox

HTML上の記述順に関係なく、カラムの表示順序を指定することができます。
指定した値が大きいボックスを右側に配置します。z-indexのような指定の仕方ですね。

サンプルコード

#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 のデモページ|CSS Lecture

■box-flex の使い方

対応ブラウザ:Safari、Google Chrome、Firefox

box-flexを指定するとカラムの横幅を可変にすることができます。可変にしたいboxに「box-flex: 1;」と指定。

サンプルコード

#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 のデモページ|CSS Lecture

■box-sizing の使い方

対応ブラウザ:Safari、Google Chrome、Firefox、Opera、IE8

widthやheightの値に対して、borderやpaddingを含めるかどうかを指定できます
borderやpaddingを含めない場合はcontent-boxを指定し、borderやpaddingを含める場合はborder-boxを指定します。

サンプルコード

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 のデモページ|CSS Lecture

 

情報元:CSS3 でのレイアウトで使える box 系プロパティのまとめ | CSS Lecture

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree