floatを使うより簡単

ボックス要素を横並びにしたい場合floatを使用してレイアウトすることが多々あると思いますが、flex-boxを使用することでボックス要素を横並び、要素の並び替え、高さの違う要素を上下中央に揃える等少量のcssで簡潔にレイアウトすることができます。

使い方

・並べたい要素の親要素と子要素にdisplay: flex;を設定
・親要素にjustify-content:で並び方を設定（設定の仕方は以下）

中央揃え

See the Pen filex-box1 by AkiraSatou (@SatoWeb) on CodePen.0

右揃え

See the Pen flex-box2 by AkiraSatou (@SatoWeb) on CodePen.0

均等配置(両端のボックス要素は始端と終端に配置)

See the Pen flex-box3 by AkiraSatou (@SatoWeb) on CodePen.0

均等配置均等配置（両端ボックス要素は始端、終端からボックス間隔の半分の距離）

See the Pen gOOLqPP by AkiraSatou (@SatoWeb) on CodePen.0

レスポンシブにも対応

少量のコードでレスポンシブにも対応しているので制作も捗ります。
IEにも最新のバージョンには対応しているので使いやすいです。お試しください。