【CSS】CSS3でFlexboxの水平方向と垂直方向の揃え方とは！？

このブログでも、何回か記事にした事もあるCSS3のFlexboxについての記事ですが、最近各ブラウザでもようやく使用できるレベルまでなってきたので、新たにメモしてみようかと。Flexboxに関してのほかの記事は書きになります。割と以前の記事ですが、仕様は変わっておりません。

現在のブラウザの対応

Flexbox対応ブラウザ一覧

上記の画像を見るとIEが11から対応している模様です。ただモバイルに関してはOpera Miniが対応していないのですがほとんど使ってる人を見たことないのでこの辺りは、無視してもいいんじゃないでしょうか。

こちらは子要達をまとめて水平方向での揃え方で使うプロパティとしてjustify-contentがあるんですが、これもいくつか要素があるので下記に示してそれを実験って流れで。

個人的には、子要素のボックスが均等に間隔をあけてくれるspace-betweenと左右にも少し余裕を持たせてくれるspace-aroundは助かるかもなぁという感じですね♪

flex-start	横並びの場合は上揃え、縦並びの場合は左揃え
flex-end	横並びの場合は下揃え、縦並びの場合は右揃え
center	中央揃え
baseline	ベースラインを揃える。
stretch	flexboxの親要素の高さ、もしくはflexboxの子要素のボックスで一番高いボックスの高さに合わせて自動的に広げる。

垂直方向の揃え方ということで個人的にはボックスの塊を縦方向の中心に揃えられるcenterと今までdiv要素の高さを揃えるのがめんどくさかったのがstretchを指定することで高さを広げるので揃えることが楽になりましたｗ