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に背景色をつけているだけの、何てことない記述です。

01<div class="box_wrap">
02    <div class="box1">
03    ボックス1
04    </div>
05 
06    <div class="box2">
07    ボックス2
08    </div>
09 
10    <div class="box3">
11    ボックス3
12    </div>
13 
14    <div class="box4">
15    ボックス4
16    </div>
17</div>

こちらはCSSです。

01.box_wrap {
02    width: 100%;
03}
04 
05.box1 {
06    width: 100%;
07    background-color: red;
08}
09 
10.box2 {
11    width: 100%;
12    background-color: blue;
13}
14 
15.box3 {
16    width: 100%;
17    background-color: yellow;
18}
19 
20.box4 {
21    width: 100%;
22    background-color: green;
23}

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

ボックス1

ボックス2

ボックス3

ボックス4

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

01.box_wrap {
02    width: 100%;
03    display: -webkit-flex;
04    display: flex;
05}
06 
07.box1 {
08    width: 100%;
09    background-color: red;
10}
11 
12.box2 {
13    width: 100%;
14    background-color: blue;
15}
16 
17.box3 {
18    width: 100%;
19    background-color: yellow;
20}
21 
22.box4 {
23    width: 100%;
24    background-color: green;
25}