【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; } }