floatやflexboxを使うことで、ウィンドウサイズに合わせて横に並ぶボックス自体も伸縮するレイアウトを組むことができます。
ブログのコンテンツを並べたり、ギャラリーページ等を作る際に重宝するレイアウトです。
大きな違いを見てみると以下のようになります。
float
- IE10以下等の旧ブラウザでも対応できる
- 昔からあるため扱い慣れている方が多い
- marginを%で指定できる
flexbox
- どのモダンブラウザ見ることができるが、IE10以下等は対応していない
- フレックスアイテムは横並びにしたときに高さが揃う
- floatに比べて高速且つパフォーマンスが高い
- 次世代の標準となりえる技術
まずはfloatで作成してみます。
HTML（一列分のコードです。列を増やしたい場合はulタグをコピーして増やしたい分だけペーストしましょう。）
<h1>Sample</h1>
<ul class="box-list">
<li>
<div><img src="image01.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
<li>
<div><img src="image02.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
<li>
<div><img src="image03.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
<li>
<div><img src="image04.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
<li>
<div><img src="image05.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
</ul>
CSS
*{
box-sizing: border-box;
}
.box-list{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.box-list li{
float: left;
border:1px solid #ddd;
width: 19%;
margin-bottom: 1%;
margin-right: 1.25%;
}
ul li:last-child{
margin-right:0;
}
img{
width: 100%
}
まず、box-sizing:border-boxを忘れずに入れておきましょう。全体の幅が100％なので、それを超えないように要素を配置していきます。
横に並べたい要素が4つなら25%以下、3つなら33.3333･･･%以下、2つなら50%以下というように、合計で100％以下になるように設定していきます。
今回は5つのボックスを横並びにするため、20％以下の長さで指定します。ボックス同士がくっつかないように余白の部分も入れたいので、ボックスの長さを19％とし、余白を1.25%とります。
最後のボックスの余白は0にするため、19%×5＋1.25%×4＝100％の計算となります。ulタグのoverflowプロパティはfloatを解除するために設定しています。
次はflexboxでレイアウトを組んでいきます。
HTML(一列分のコードです。列を増やしたい場合はliタグをコピーして増やしたい分だけペーストしましょう。floatと違う箇所は、ulタグは一つだけ構成されているところです。)
<h1>Sample</h1>
<ul class="box-list">
<li>
<div><img src="image01.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
<li>
<div><img src="image02.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
<li>
<div><img src="image03.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
<li>
<div><img src="image04.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
<li>
<div><img src="image05.jpg"></div>
<h2>Title</h2>
<p>Description</p>
</li>
</ul>
CSS
.box-list{
display: flex;
margin: 0;
padding: 0;
list-style: none;
justify-content: space-between;
flex-flow: row wrap;
}
.box-list li{
flex: 0 0 19%;
border: 1px solid #ccc;
margin-bottom: 10px;
}
img{
width: 100%;
}
flex-flowにrowを入力し、要素を縦に並べる設定をします。フレックスアイテムが1行に収まりきらない場合は改行してレイアウトを整えるためにwrapも設定します。display:flexで子要素をフレックスで配置の設定をします。
flex: 0 0 19%はフレックスアイテムの伸縮の設定です。フレックスボックスのmarginを%で配置するとブラウザによってレイアウトが崩れてしまうためjustify-contentでボックスを均等配置します。
そのため、justify-contentに使うぶんの余白が必要なので、フレックスアイテムのベースサイズは最大の20％ではなく、19%に設定しています。
floatは一度覚えてしまえばシンプルで扱いやすいですが、flexboxは様々なレイアウトが組める上に高速なので是非両方覚えておきたいですね。
