Flexboxの導入

HTMLの要素のレイアウトを指定するにはCSSのfloatプロパティを利用したりしますが、その他にFlexboxを用いてレイアウトを指定できます。
FlexboxとはFlexible Box Layout Moduleの事でフレキシブルにボックスモデルを指定できるCSSの機能です。
このFlexboxはHTMLの要素に適用するとその要素を並列して横方向に並べるスタイルになります。
シンプルにFlexboxを適用するには、適用するHTMLの要素にCSSでdisplay:flexと指定すれば適用されます。
Flexboxの利点として少ないコードでレイアウトをシンプルに指定することができます。要素の並びや位置も手軽に操作できます。





Flexboxは最近制定された機能であり古いブラウザではうまく適用されない場合があります。
最近のブラウザではFlexboxはサポートされていますが、古いブラウザや仕様変更に対応するためにベンダープレフィックス（ブラウザ独自の拡張機能だと表す識別子）を追加で記述する場合もありますので、Flexboxを用いる前に確認しておくとよいでしょう。