floatはもう古い！新時代のfloat、FlexboxでCSSレイアウト

更新日：2017年10月8日

以前、テキストを縦中央に配置する方法の記事内にて、floatを使わずにレイアウトが可能なdisplay: table-cell;のことを紹介しましたが、それ以上に便利なCSSが存在しました。その名もFlexboxです。

過去にCSS3の勉強をした際に認知はしていたのですが、実際に触ってみたことはありませんでした。当時はFlexboxに対応していないブラウザがあまりにも多かった為です。

それが最近では主要なブラウザはほとんど対応しているということで、使ってみた所、本当に便利で驚きました。まさに今のレスポンシブ時代に最適化したfloatといった感じです。
ちなみにIE10以前ではFlexboxは使えません。

それではFlexboxの使い方を早速ご紹介していきます。そもそもFlexboxとは何かというと、簡単にまとめると

細かなwidthの指定の必要がない
要素の順番や位置を簡単に変更することが出来る
floatを使わなくても横並びのレイアウトを作ることが出来る

といった感じです。百聞は一見に如かずということで実際に記述してみましょう。

例えば下記のようなHTMLとCSSがあったとします。
分かりやすいようにdivに背景色をつけているだけの、何てことない記述です。


	
	ボックス1
	

	
	ボックス2
	

	
	ボックス3
	

	
	ボックス4

こちらはCSSです。

.box_wrap {
	width: 100%;
}

.box1 {
	width: 100%;
	background-color: red;
}

.box2 {
	width: 100%;
	background-color: blue;
}

.box3 {
	width: 100%;
	background-color: yellow;
}

.box4 {
	width: 100%;
	background-color: green;
}

実装すると下記のようなカラフルなボックスが縦に並びます。

ボックス1

ボックス2

ボックス3

ボックス4

ではこれにFlexboxを適用してみましょう。
先程のCSSにFlexbox用の2行のソースを追記します。

.box_wrap {
	width: 100%;
	display: -webkit-flex;
	display: flex;
}

.box1 {
	width: 100%;
	background-color: red;
}

.box2 {
	width: 100%;
	background-color: blue;
}

.box3 {
	width: 100%;
	background-color: yellow;
}

.box4 {
	width: 100%;
	background-color: green;
}

display: -webkit-flex;
と
display: flex;
の2行のソースが追記されただけです。

display: -webkit-flex;はブラウザのSafariにFlexboxを適用させる為の記述です。

Flexbox用の2行のソースを追記したものが下記になります。

ボックス1

ボックス2

ボックス3

ボックス4

お分かり頂けたでしょうか？
Flexboxを適用することで、それぞれが調度良い均等な幅になりました。
また、floatもしていないのに横並びになりました。
更にウインドウの幅を狭めてみても既にレスポンシブ対応しています。とっても便利ですね。

ちなみに更に記述を追加することで、順番や位置を簡単に変更することが出来ます。
例えば
flex-direction: row-reverse;
というCSSの記述を.box_wrapに追記すると下記のようになります。

ボックス1

ボックス2

ボックス3