floatで並べていたタイルをflexboxで書き直す

タイルレイアウトをfloatで実現するにはタイルの高さをそろえるためにheightを固定するとかしなきゃいけない。
WordPressみたいに記事からタイトルとサムネイルを取り出して並べる場合はタイルの中身がはみ出すというトラブルによく遭遇する。何でそんな縦に長い写真を使ってるんだとかお前タイトル長すぎだろうとかそういうのが原因。
仕方がないので、height固定はあきらめてmin-heightである程度高さを持たせてレイアウトすることが多い。

そんなことをやっていたのは1年ほど前までで、IE8も9も公式には存在しないことになっている今となってはflexboxレイアウトを導入することができるよねと。
で、これまでfloatで配置していたものをflexで書き換えるにはどうするかと。

このとき、heightではなくmin-heightで調整していたのなら簡単で、並べているタイルの一群をラップするdiv箱を作って、そこにflexboxのプロパティを設定するだけでよい。
例えばラップするdivのクラス名を"flex"とした場合、CSSには以下の記述を追加する。

.flex {	
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: stretch;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

webkit系のベンダープレフィクスはもう要らないかも。

子要素の幅の調整とかは従来floatで行っていたwidthの値がそのまま生きるから気にしなくていい。
また、子要素にfloatの指定が残っていても、flexboxの方が優先される。つまりfloat: left;で、親要素に　flex-direction: row-reverse; がある場合、子要素は右詰めで並ぶ。

floatとの混在はあまりきれいなものとは言えないかもしれないが、IE9以下がしぶとく使われそうな日本の状況では残しておくとレガシー対応となってよい感じになる。

新規に作る場合でレガシー対応せざるを得ない場合

デバッグ済みのフレームワークを使う。bootstrapとかは重くて扱いにくいのでKomitsuboshi-cssを使っている。自分で作るのは大変だけどかなり勉強になる。
IE8,9でもmatchheight.jsを使えばflexboxみたいに高さを合わせることができる。ただしdisplay:none;してる要素の高さも計算するらしいのでその点は注意が必要。