こんにちはジーニアスウェブの前田です。
Flexboxとは、要素のサイズが決まっていないものでも、柔軟に変動でき複雑なレイアウトでも実現できるCSS3の新しい仕様です。
要素の高さが違うものの高さを揃えたい場合など、今まではjavascriptで実現していたものがcssで表現できるようになったとても便利な機能です。
目次／このページでわかること
Flexboxの利点
今までは様々なプロパティーを組み合わせたり、JavaScriptやpositionを使って表現していた配置なども、Flexboxでは一行で簡単に実装できます。
利点は主に下記の3点が大きな利点になります。
・CSSを一行書くだけで横並びにできる(floatではないのでclearfixやclearなどが不要)
・横並びになった要素の高さを揃えられる
・要素の順序を変えることができる
いままではfloatを使い、clearでfloat解除をする必要があったのでそれが不要なのでとても便利になりました。
実際に見てみましょう
利点を文章で書いても、メリットはわかりづらいと思うのでサンプルを数点作ってみましたのでサンプルを見ながら説明していきます。
display: flex;という表記を親要素に加えただけで横並びになりました。clearの設定は必要ありません。
要素のスペースを自在に操ろう
「flex-direction」で指定した子要素の配置方向をベースに、様々な揃え方を指定できます。
justify-contentで、要素と要素の間や、水平方向の揃え方をカスタマイズできます。値を space-between とすると、最初の要素が左端に、最後の要素が右端に移動し、その間の要素は等間隔に並べられます。
コンテンツにもflexboxを使おう
flexboxは上記に書いてきたようなメニュー部分だけではなく、コンテンツ部分にもつかうことができますので、３カラムで横に並べたい時、異なる要素の高さを揃えたい時に利用しましょう。
高さの異なる要素を垂直に中央揃え
flexboxの技術がでてくる前はpositionやfloatなどを駆使して中央揃えも一行で解決ができます。Flexboxを使えば、これも一行で解決です。使用するプロパティーは align-itemsです。
まとめ
FloatやClearfixを多用してメニューやコンテンツをを横並びにしていたのが嘘のような技術がでてきていますね。
flexboxにはプロパティがたくさんあるので全部は私も覚えていませんが、参考サイトにプロパティがたくさん挙げられているので是非参考にしてみてください。