【CSS】float、flexbox、positionそれぞれのプロパティで同じレイアウトにする

float、flexbox、positionそれぞれ方法で同じ結果になるようなレイアウトをしてみます。

※横幅375px以下はメディアクエリにより.content-boxの左右が100%として表示されますのでPCで閲覧してください。

CSSでレイアウトする前の状態はこちら

.content-bodyの中に.content-boxを作ります。

<div class="content-body">
	<div class="content-box"></div>
	<div class="content-box"></div>
	<div class="content-box"></div>
</div>
.content-body{
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.content-box{
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}

float(フロート)でレイアウトする

floatをして横並びにします。.content-bodyの中の.content-boxにfloat:leftをしますので、それを囲んでいる親要素.content-bodyのfloatを解除するために、「.clearfix」を利用します。

clearfixについて

clearfixは2004年にオーストラリア人のTony Aslettという人が作ったfloatを解除するクラスで、現在では各ライブラリに組み込まれる標準的なものになっている。

CSSCreator.com Clearfix

/*親要素でclearfixしてfloatを解除する*/
<div class="content-body clearfix">
	<div class="content-box"></div>
	<div class="content-box"></div>
	<div class="content-box"></div>
</div>
.content-body{
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.content-box{
 
	/*子要素の.content-boxにfloat:leftする*/
	float:left;
 
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}
 
/*親要素用のclearfixを用意*/
.clearfix:after,.clearfix:before{
	content: "";
	display: block;
	clear: both;
}
.clearfix {
	display: block;
}
 
/*375px以下*/
@media only screen and (max-width:375px) {
 
	/*375px以下ではフロート解除*/
	.content-box{
		float:none;
		width:100%;
	}
}

flexbox(フレックスボックス)でレイアウトする

flexboxを利用して横並びにします。.content-bodyにdisplay:flexをします。display:flexをした段階で、各初期値が設定されるので横並びになります。

【CSS】flexboxの基本(親要素)

<div class="content-body">
	<div class="content-box"></div>
	<div class="content-box"></div>
	<div class="content-box"></div>
</div>
.content-body{
 
	/*親要素をdisplay:flexする*/
	display:flex;
 
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.content-box{
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}
 
/*375px以下*/
@media only screen and (max-width:375px) {
 
	/*375px以下ではフレックス解除、横幅100%に*/
	.content-box{
		display:block;
		width:100%;
	}
}

position(ポジション)でレイアウトする

positionを利用して横並びにします。positionを利用するので座標により無理やりレイアウトする事になります。上記二つとの違いを理解するために行います。また、子要素をposition:absoluteすると空間が作成されなくなるので、親要素にも高さを設定する必要があります。

<div class="content-body">
	<div class="content-box"></div>
	<div class="content-box"></div>
	<div class="content-box"></div>
</div>
.content-body{
 
	/*親要素を相対対象にする*/
	position:relative;
 
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.content-box{
 
	/*子要素を絶対対象にする*/
	position:absolute;
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}
 
.content-box:nth-child(1){
 
	/*子要素1番目の座標を設定*/
	top:0;
	left:0;
}
 
.content-box:nth-child(2){
 
	/*子要素2番目の座標を設定*/
	top:0;
	left:100px;
}
 
.content-box:nth-child(3){
 
	/*子要素3番目の座標を設定*/
	top:0;
	left:200px;
}
 
/*375px以下*/
@media only screen and (max-width:375px) {
 
	/*375px以下横幅100%に*/
	.content-box{
		width:100%;
	}
	/*375px以下では縦並びになるように調整*/
	.content-body .content-box:nth-child(1){
		top:0;
		left:0;
	}
 
	.content-body .content-box:nth-child(2){
		top:100px;
		left:0;
	}
 
	.content-body .content-box:nth-child(3){
		top:200px;
		left:0;
	}
}

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー(フリー)/ WEB講師(非常勤)/ 海外販売(法人)他

お仕事のご相談はお問い合わせフォームへお願いします。